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M M/elcome to the wild, wacky, and wonderful possibilities of the World 
WW Wide Web, simply referred to as the Web. In this book, we introduce 
you to the mysteries of the Hypertext Markup Language (HTML) and its suc- 
cessor, XHTML. Because HTML and XHTML (we use (XJHTML in this book 
to refer to both versions at the same time) are used to build Web pages, 
learning them will bring you into the community of Web authors and content 
developers. 

If you've tried to build your own Web pages but found it too forbidding, now 
you can relax. If you can dial a telephone or find your keys in the morning, you 
too can become an (X)HTML author. No kidding! 

This book keeps the technobabble to a minimum and sticks with plain English 
whenever possible. Besides plain talk about hypertext, (X)HTML, and the 
Web, we include lots of examples, plus tag-by-tag instructions to help you 
build your very own Web pages with minimum muss and fuss. We also provide 
more examples about what to do with your Web pages after they're created so 
you can share them with the world. We also explain the differences between 
HTML 4 and XHTML, so you can decide whether you want to stick with the 
best-known and longest-lived Web markup language (HTML) or the latest and 
greatest Web markup language (XHTML). 

We also have a companion Web site for this book that contains (X)HTML 
examples from the chapters in usable form — plus pointers to interesting 
widgets that you can use to embellish your own documents and astound 
your friends. Visit www . dummi es .com/extras and select "HTML 4 For 
Dummies, 5th Edition" from the list. 



About This Book 

Think of this book as a friendly, approachable guide to taking up the tools of 
HTML and building readable, attractive pages for the Web. HTML isn't hard 
to learn, but it packs a lot of details. You need to handle some of these details 
while you build your Web pages. Topics you find in this book include 

W Designing and building Web pages 

Uploading and publishing Web pages for the world to see 
Testing and debugging your Web pages 
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You can build Web pages without years of arduous training, advanced aes- 
thetic capabilities, or ritual ablutions in ice-cold streams. If you can tell some- 
to drive across town to your house, you can build a useful Web 
t. The purpose of this book isn't to turn you into a rocket scientist 
(or, for that matter, a rocket scientist into a Web site). The purpose is to show 
you the design and technical elements you need for a good-looking, readable 
Web page and to give you the confidence to do it! 



Hou? to Use This Book 

This book tells you how to use (X)HTML to get your Web pages up and run- 
ning on the World Wide Web. We tell you what's involved in designing and 
building effective Web documents that can bring your ideas and information 
to the whole online world — if that's what you want to do — and maybe have 
some high-tech fun communicating them. 

All (X)HTML code appears in monospaced type such as this: 

<head><title>What's in a Title?</titleX/head>. . . 

When you type (X)HTML tags or other related information, be sure to copy 
the information exactly as you see it between the angle brackets (< and >), 
including the angle brackets themselves, because that's part of the magic 
that makes (X)HTML work. Other than that, you find out how to marshal and 
manage the content that makes your pages special, and we tell you exactly 
what you need to do to mix the elements of (X)HTML with your own work. 

The margins of a book don't give us the same room as the vast reaches of 
cyberspace. Therefore, some long lines of (X)HTML markup, or designations 
of Web sites (called URLs, for Uniform Resource Locators), may wrap to the 
next line. Remember that your computer shows such wrapped lines as a 
single line of (X)HTML, or as a single URL — so if you type that hunk of code, 
keep it as one line. Don't insert a hard return if you see one of these wrapped 
lines. We clue you in that the (X)HTML markup is supposed to be all one line 
by breaking the line at a slash or other appropriate character (to imply "but 
wait, there's more!") and by slightly indenting the overage, as in the following 
silly example: 

http: //www. i nfocadabra . transyl vani a . com/nexus /pi exus/1 exus/ 
praxi s/okay/thi s/i s/a/make-bel i eve/URL/but /some /real / 
ones/are/SERIOUSLY/long.html 

HTML doesn't care whether you type tag text in uppercase, lowercase, or 
both (except for character entities, also known as character codes). XHTML, 
however, wants tag text only in lowercase in order to be perfectly correct. 
Thus, to make your own work look like ours as much as possible, enter all 
(X)HTML tag text in lowercase only. (If you have a previous edition of the 
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book, this is a complete reversal of earlier instructions. The keepers of the 
eternal and ever-magnanimous standard of HTML, the World Wide Web 

^um (W3C), have restated the rules of this game, so we follow their 
don't make the rules, but we do know how to play the game!) 



Three Presumptuous Assumptions 

They say that making assumptions makes a fool out of the person who makes 
them and the person who is subject to those assumptions (and just who are 
they, anyway? We assume we know, but . . . never mind). 

You don't need to be a master logician or a wizard in the arcane arts of pro- 
gramming, nor do you need a PhD in computer science. You don't even need 
a detailed sense of what's going on in the innards of your computer to deal 
with the material in this book. 

Even so, practicality demands that we make a few assumptions about you, 
gentle reader: you can turn your computer on and off; you know how to use 
a mouse and a keyboard, and you want to build your own Web pages for fun, 
profit, or your job. We also assume that you already have a working connec- 
tion to the Internet and a Web browser. 

If you can write a sentence and know the difference between a heading and a 
paragraph, you can build and publish your own documents on the Web. The 
rest consists of details, and we help you with those! 



HoW This Book Is Organized 

This book contains seven major parts, arranged like Russian Matrioshka 
(nesting dolls). Parts contain at least three chapters, and each chapter 
contains several modular sections. How you use the book is up to you: 

Jump around. 

V Find topics or keywords in the Index or in the Table of Contents, 
f* Read the whole book from cover to cover. 



Part h Getting to Knou! (X) HTML 

This part sets the stage and includes an overview of and introduction to the 
Web and the software that people use to mine its treasures. This section also 
explains how the Web works, including the (X)HTML to which this book is 
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devoted, and the server-side software and services that deliver information 
to end users (when we aren't doing battle with the innards of our systems). 



documents, also called Web pages, are the fundamental units of 
information organization and delivery on the Web. Here, you also discover 
what HTML is about and how hypertext can enrich ordinary text. Next, you 
take a walk on the Web side and build your very first (X)HTML document. 



Part 11: Formatting Web 
Pages with (K)HTML 

HTML mixes ordinary text with special strings of characters, called markup, 
used to instruct browsers how to display (X)HTML documents. In this part 
of the book, you find out about markup in general and (X)HTML in particular. 
We start with a fascinating discussion of (X)HTML document organization 
and structure. (Well . . . we think it's fascinating, and hope you do, too.) Next, 
we explain how text can be organized into blocks and lists. Then we tackle 
how the hyperlinks that put the H into (X)HTML work. After that, we discuss 
how you can find and use graphical images in your Web pages and make 
some fancy formatting maneuvers to spruce up those pages. 

Throughout this part of the book, we include discussion of (X)HTML markup 
elements (tags) and how they work. By the time you finish Part II, expect to 
have a good overall idea of what HTML is and how you can use it. 



Part 111: Taking Precise 
Control Over Web Pages 

Part III starts with a discussion of Cascading Style Sheets (CSS) — another 
form of markup language that lets (X)HTML deal purely with content while it 
deals with how Web pages look when they're displayed in a Web browser. 
After exploring CSS syntax and structures and discovering how to use them, 
you learn how to manipulate the color and typefaces of text, backgrounds, 
and more on your Web pages. You also learn about more complex collections 
of markup — specifically tables — as you explore and observe their capabili- 
ties in detail. We give you lots of examples to help you design and build 
commercial-grade (X)HTML documents. You can get started working with 
related (X)HTML tag syntax and structures that you need to know so you 
can build complex Web pages. 
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(X)HTML isn't good at snazzing up text and graphics when they're on display 
(which is where CSS excels). And (X)HTML really can't do much by itself. Web 
designers often build interactive, dynamic Web pages by using scripting tools 
to add interactivity to an (X)HTML framework. 

In this part of the book, you learn about scripting languages that enable Web 
pages to interact with users and that also provide ways to respond to user 
input or actions and to grab and massage data along the way. You learn about 
general scripting languages, and we jump directly into the most popular of 
such languages — JavaScript. You can discover the basic elements of this 
scripting language and how to add interaction to Web pages. You can also 
explore a typical use for scripting that you can extend and add to your own 
Web site. We go on to explore how to create and extract data from Web-based 
data input forms and how to create and use scripts that react to a user's 
actions while she visits your Web pages. 

Throughout this part of the book, examples, advice, and details show you 
how these scripting components can enhance and improve your Web site's 
capabilities — and your users' experiences when visiting your pages. 



Part V: HTML Projects 

This part tackles typical complex Web pages. You can use these as models for 
similar capabilities in your own Web pages. These projects include About Me 
and About My Company pages, an eBay auction page, a product marketing 
page, and even a product catalog page with its own shopping cart! 

Part V\: The Part of Tens 

We sum up and distill the very essence of the mystic secrets of (X)HTML. 
Here, you can read further about cool Web tools, get a second chance to 
review top do's and don'ts for HTML markup, and review how to catch and 
kill potential bugs and errors in your pages before anybody else sees them. 



Part (Ah Appendixes 

This book ends with appendixes of technical terms and a Glossary. 



HTML 4 For Dummies, 5th Edition 



Icons Used in This Book 




signals technical details that are informative and interesting but 
that aren't critical to writing HTML. 



This icon flags useful information that makes HTML markup or other impor- 
tant stuff even less complicated than you feared it might be. 



i 



This icon points out information you shouldn't pass by — don't overlook 
these gentle reminders (the life, sanity, or page you save could be your own). 



Be cautious when you see this icon. It warns you of things you shouldn't do; 
consequences can be severe if you ignore the accompanying bit of wisdom. 



Text marked with this icon contains information about something that can be 
found on this book's companion Web site. You can find all the code examples 
in this book, for starters. Simply visit the Extras section of Dummies.com 
(www . dummi es . com /extras) and click the link for this book. We also use this 
icon to point out great useful Web resources. 

The information highlighted with this icon gives best practices — advice that 
we wish we'd had when we first started out! These techniques can save you 
time and money on migraine medication. 



Where to Go from Here 

This is where you pick a direction and hit the road! Where you start out 
doesn't matter. Don't worry. You can handle it. Who cares whether anybody 
else thinks you're just goofing around? We know you're getting ready to have 
the time of your life. Enjoy! 
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"...and that's pretty muck all -there v=, -to 
converting a document -to an HTML file . " 
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In this part . . . 

In this part of the book, we explore and explain basic 
HTML document links and structures. We also explain 
the key role that Web browsers play in delivering all this 
stuff to people's desktops. We even explain where the 
(X) comes from — namely, a reworking of the original 
description of HTML markup using XML syntax to create 
XHTML — and go on to help you understand what makes 
XHTML different (and possibly better, according to some) 
than plain old HTML. We also take a look at Web page 
anatomy and look at the various pieces and parts that 
make up a Web page. 

Next, we take you through the exercise of creating and 
viewing a simple Web page so you can understand what's 
involved in doing this for yourself. We also explain what's 
involved in making changes to an existing Web page and 
how to post your changes (or a new page) online. 

This part concludes with a rousing exhortation to figure 
out what you're doing before making too much markup 
happen. Just as a well-built house starts with a set of blue- 
prints and architectural drawings, so should a Web page 
(and site) start with a plan or a map, with some idea of 
where your pages will reside in cyberspace and how 
hordes of users can find their way to them. 



Chapter 1 

Need to Know 
about HTML and the Web 



In This Chapter 

Creating HTML in text files 
Serving and browsing Web pages 
Understanding links and URLs 
Understanding basic HTML syntax 



EM/ elcome to the wonderful world of the Web and HTML. With just a little 
ww bit of knowledge, some practice, and something to say, you can either 

build your own little piece of cyberspace or expand on work you've already 

done. 

This book is your down-and-dirty guide to putting together your first Web 
page, sprucing up an existing Web page, or creating complex and exciting 
pages that integrate intricate designs, multimedia, and scripting. 

The best way to start working with HTML is to jump right in, so that's what 
this chapter does: It brings you up to speed on the basics of how HTML works 
behind the scenes of Web pages, introducing you to HTML's building blocks. 
When you're done with this chapter, you'll know how HTML works so you can 
start creating Web pages right away. 



Web Paqes in Their Natural Habitat 



Web pages can contain many kinds of content, such as text, graphics, forms, 
audio and video files, and interactive games. 
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Browse the Web for just a little while and you see a buffet of information and 
content displayed in many ways. Every Web site is different, but most have 
in common: the Hypertext Markup Language (HTML). 



Whatever information a Web page contains, every Web page is created in 
HTML (or some reasonable facsimile). HTML is the mortar that holds a Web 
page together; the graphics, content, and other information are the bricks. 

^fd-Sty^ HTML files that produce Web pages are just text documents. That's why the 
Web works as well as it does. Text is the universal language of computers. 
Any text file that you create on a Windows computer, including an HTML file, 
works equally well on any other operating system. 

But Web pages aren't merely text documents. They're made with a special, 
attention-deprived, sugar-loaded text called HTML. HTML is a collection of 
instructions that you include along with pointers to your content in a text 
file that specifies how your page should look and behave. 

Stick with us to discover all the details you need to know about HTML! 



Hypertext 



Special instructions in HTML permit text to point (link) to something else. 
Such pointers are called hyperlinks. Hyperlinks are the glue that holds the 
World Wide Web together. In your Web browser, hyperlinks usually appear in 
blue and are underlined. When you click one, it takes you somewhere else. 



Hypertext or not, a Web page is a text file. You can create and edit a Web page 
in any application that creates plain text (such as Notepad). When you're get- 
ting started with HTML, a text editor is the best tool to use. Just break out 
Notepad and you're ready to go. Some software tools have fancy options and 
applications (covered in Chapter 20) to help you create Web pages, but they 
generate the same text files that you create with plain-text editors. 



The World Wide Web comes by its name honestly. It's quite literally a web 
of pages hosted on Web servers around the world, connected in millions of 
ways. Those connections are made by hyperlinks that connect one page to 
another. Without such links, the Web is just a bunch of standalone pages. 



Much of the Web's value comes from its ability to link to pages and other 
resources (such as images, downloadable files, and media presentations) 
on either the same Web site or at another site. For example, FirstGov (www . 
f i rstgov . gov) is a. gateway Web site — its sole function is to provide access 
to other Web sites. If you aren't sure which government agency handles first- 
time loans for homebuyers, or if want to know how to arrange a tour of the 
Capitol, visit this site (shown in Figure 1-1) to find out. 
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Figure 1-1: 

FirstGov 
uses 
hyperlinks 
to help 
visitors find 
government 
information. 




A-Z Agency 
Federal Executive 
Federal Legislative 
Federal Judicial 
Cross -Agency Portals 
State Government 
Local Government 
Tr ibal Government 

Contact Yom 

Government » 



Find Government Benefits 
Apply for Government Grants 
Shop Government Auctions 
Apply for Government Jobs 
Change Your Address 
Find Recreation Activities 
RenewYour Driver's License 



Mail-in Voter Registration 
Get a Passport Application 
Apply for Social Security 
Check Immigration Case Status 
See Lottery Results 
Contact Elected Officials 
Order Consumer Publications 
rime i-er ■■■iv e; 



dj http://www.fit-.tg 07 gi:.v/Ageni:ie5,i'i'tate_arid_Territories.shtrnl 



Markup 



Web browsers were created specifically for the purpose of reading HTML 
instructions (known as markup) and displaying the resulting Web page. 

Markup lives in a text file (with your content) to give orders to a browser. 

For example, look at the page shown in Figure 1-2. You can see how the page 
is made up and how it is formatted by examining its underlying HTML. 



Figure 1-2: 

This Web 
page 
incorporates 
multiple 
parts and 
numerous 
bits of 
markup. 



'3 Wine Varietals - Microsoft Internet Explor 
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Understanding Red W ine Varietals 



Although wines tend to be generic-ally categorized as either "white" or "red," in reality, there is a collection of 
wiiie i-anetdls each wi'h it:, own dirmguishmg :.h:irac tens tic ; The red : Ategory includes a robust c ■:-llecti-:.n 
of over 20 varietals, including: 

• Barb era 

• Bruneilo 

• Cabernet Franc 

• Cabernet Sauvignon 

• Carignan 

■ Charbono 

• Dolcetto 

• Gamay 

• Grenache 

• Malbrec 

• Merlot 

• Mourvedre 



_ Dene 



| My Computer 
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This page includes an image, a heading that describes the page, a paragraph 
of text about red wine, and a list of common grape varietals. 



different components of the page use different formatting: 



The heading at the top of the page is larger than the text in the 
paragraph. 

The items in the list have bullet points (big dots) before them. 

The browser knows to display these components of the page in specific ways 
thanks to the HTML markup, shown in Listing 1-1. 



Listing 1 -1 : Sample HTML Markup 

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http://www.w3.org/TR/xhtml 1/ DTD/xhtml 1 -transi ti onal . d t d " > 
<html xmlns="http://www. w3.org/1999/xhtml "> 

<head> 

<title>Wine Varietal s</ti tl e> 
</head> 

<body> 

<hl><img src="red_grapes.jpg" width="75" height="100" 
a 1 1= " Red Grapes" align="middle" hspace="5" /> 
Understanding Red Wine Varietals 

</hl> 

<p>Al though wines tend to be generically categorized as 
either "white" or "red," in reality, there is a 
collection of wine varietals each with its own 
distinguishing characteristics. The red category 
includes a robust collection of over 20 varietals, 
including: 



</p> 




<ul> 




<1 


>Barbera</li> 


<1 


>Brunello</li> 


<1 


>Cabernet Franc</li> 


<1 


>Cabernet Sauvi gnon</l i > 


<1 


>Cari gnan</l i > 


a 


>Carmenere</l i> 


a 


>Charbono</l i > 


<i 


>Dolcetto</li> 


<i 


>Gamay</li> 


<i 


>Grenache</l i > 


<i 


>Malbrec</li> 


0 


>Merlot</li> 


a 


>Mourvedre</l i> 


<i 


>Nebbiolo</li> 


<i 


>Petite Sirah</li> 


<i 


>Pi not Noir</li> 
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<li>Sangiovese</li> 
<li>Syrah</li> 
i Hemprani 1 1 o</l i > 
i>Zinfandel</li> 

</body> 
</html> 



Any text enclosed between less-than and greater-than signs (< >) is an HTML 
tag (often called the markup). For example, a p within brackets (<p> . . . </p> 
tags) identifies the text about red varietals as a paragraph; the 1 i (<1 i > . . . 
< / 1 i > tags) markup identifies each item in a list of varietals. That's really all 
there is to it. You embed the markup in a text file, along with text for readers 
to view, to let the browser know how to display your Web page. 




Tags and content between and within the tags are collectively called 
elements. 



Browsers 

The user's piece in the Web puzzle is a Web browser. Web browsers read 
instructions written in HTML and use those instructions to display a Web 
page's content on your screen. 



A bevy of browsers 

The Web world is full of browsers of many shapes and sizes — or rather versions and feature sets. 
Two of the more popular browsers are Microsoft Internet Explorer and Netscape Navigator. Other 
browsers, such as Mozilla Firefox and Opera, are widely used. As an HTML developer, you must 
think beyond your own browser experience and preferences. Every user has his or her own 
browser preferences and settings. 

Each browser renders HTML a bit differently. Every browser handles JavaScript, multimedia, style 
sheets, and other HTML add-ins differently, too. Throw different operating systems into the mix, 
and things get really fun. 

Usually, the differences between browsers are minor. But sometimes, a combination of HTML, text, 
and media brings a specific browser to its knees. 

When you work with HTML, you need to test your pages on as many different browsers as you can. 
Install at least three different browsers on your own system for testing. We recommend the latest 
versions of Internet Explorer, Navigator, and Opera. 

Yahoo! has a fairly complete list of browsers at 

http://di r. yahoo.com/Conputers_and_Internet/Software/Internet/World_Wide_Web/Browsers 
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You should always write your HTML with the idea that people will view the 
content using a Web browser. Just remember that there's more than one kind 

I^Vv^ t ' 16re ' anC ^ eaC ' 1 ° ne comes in severa ' versions. 

Usually Web browsers request and display Web pages available via the 
Internet from a Web server. You can also display HTML pages you've saved 
on your own computer before making them available on a Web server on the 
Internet. When you're developing your own HTML pages, you view these 
pages (called local pages) in your browser. You can use local pages to get a 
good idea of what people see after the page goes live on the Internet. 

Each Web browser interprets HTML in its own way. The same HTML doesn't 
look exactly the same from one browser to the next. When you work with 
basic HTML, variances aren't significant, but as you integrate other elements 
(such as scripting and multimedia), rendering the markup can get hairy. 

Chapter 2 shows how to use a Web browser to view a local copy of your first 
Web page. 

Some people use text-only Web browsers, such as Lynx, because either 

They're visually impaired and can't use a graphical display. 
H & They like a lean, fast Web browser that displays only text. 



Web servers 



Your HTML pages aren't much good if you can't share them with the world. 
Web servers make that possible. A Web server is a computer that 

Connects to the Internet 
Runs Web server software 
V Responds to requests from Web browsers for Web pages 

Almost any computer can be a Web server, including your home computer. 
But Web servers generally are computers dedicated to the task. You don't 
need to be an Internet or computer guru to publish your Web pages, but you 
must find a Web server to serve your pages: 

■ If you're building pages for a company Web site, your IT department may 
have a Web server. (Ask your IT guru for the information.) 

f" If you're starting a new site, you need a host for your pages. 

Finding an inexpensive host is easy. Chapter 3 shows how to determine 
your hosting needs and find the perfect provider. 
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resource' 




is made up of millions of resources, each of them linkable. A 
resource's exact location is the key to linking to it. Without an exact address 
(a Uniform Resource Locator, or URL), you can't use the Address bar in a Web 
browser to visit a Web page directly. 

URLs are the standard addressing system for resources on the Web. Each 
resource (Web page, site, or individual file) has a unique URL. URLs work a 
lot like your postal address. Figure 1-3 identifies the components of a URL. 



Figure 1-3: 

The 

components 
of a URL 
help it 
define the 
exact 
location of a 
file on the 
Web. 



Domain 

I 



Filename 

L 



I I I I 

http : //www . sun . com/ developer s/evangcentral /bios . html 
I , I I , I 



T 
Protocol 



Path 



Each URL component helps define the location of a Web page or resource: 

*** Protocol: Specifies the protocol the browser follows to request the file. 

The Web page protocol is http : / / (the usual start to most URLs). 

f* Domain: Points to the general Web site (such as www . sun . com) where 
the file resides. A domain may host a few files (like a personal Web site) 
or millions of files (like a corporate site, such as www . sun . com). 

Path: Names the sequence of folders through which you must navigate 
to get to a specific file. 

For example, to get to a file in the evangcentral folder that resides in 
the devel opers folder, you use the /devel opers/evangcentral / path. 

i>* Filename: Specifies which file in a directory path the browser accesses. 

The URL shown in Figure 1-3 points to the Sun domain and offers a path that 
leads to a specific file named bi os . html : 

http: //www. sun.com/devel opers/evangcentral /bi os .html 
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Internet protocols 

Interactions between browsers and servers are made possible by a set of computer-communica- 
tion instructions: Hypertext Transfer Protocol (HTTP). This protocol defines how browsers should 
request Web pages and how Web servers should respond to those requests. 

HTTP isn'tthe only protocol at work on the Internet. The Simple Mail Transfer Protocol (SMTP) and 
Post Office Protocol (POP) make e-mail exchange possible, and the File Transfer Protocol (FTP) 
allows you to upload, download, move, copy, and delete files and folders across the Internet. The 
good news is that Web browsers and servers do all of the HTTP work for you, so you only have to 
put your pages on a server or type a Web address into a browser. 

To see how HTTP works, check Webmonkey's article, "HTTP Transactions and You": 

http: //hotwi red. lycos .con/webmonkey /geektal k/97/06/index4a . html 



Chapter 6 provides the complete details on how you use HTML and URLs to 
add hyperlinks to your Web pages, and Chapter 3 shows how to obtain a URL 
for your own Web site after you're ready move it to a Web server. 



(X) HTML's Component Parts 

The following section removes the mystery from the X. This section shows 

W The differences between HTML and XHTML 

How HTML is written (its syntax) 
v 0 Rules that govern its use 

is* Names for important pieces and parts of HTML (and XHTML) markup 
How to make the best, most correct use of its capabilities 



HTML and XHTML: What's the difference) 

HTML is Hypertext Markup Language, a notation developed in the late 1980s 
and early 1990s for describing Web pages. HTML is now enshrined in numer- 
ous standard descriptions (specifications) from the World Wide Web 
Consortium (W3C). The last HTML specification was finalized in 1999. 




OOKSntroducing 
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3ooksrML and XHTML specifications 

The formal documents to describe HTML and XHTML are on the W3C's Web site at www . w3 . org. 

Markup languages usually include version numbers to identify them. The currentversion of HTML 
is 4.01. It dates backto December 1997; you can find the document at www . w3 . org/TR/html 4. 

XHTML has gone through two major drafts, 1.0 and 1.1. The 1.1 version is more advanced than 1.0, 
but most Web content developers and software tools follow the 1 .0 specification. An XHTML 2.0 
specification is in "Working Draft" status (its authors haven't finalized its content and structure). 
When a W3C specification is finished, it's known as a W3C Recommendation. 

You can find specifications for all three versions of XHTML: 

V XHTML 2.0 Working Draft (7/4/2004) 

www.w3.org/TR/2004/WD-xhtml2-20040722/ 

V XHTML 1.1 Module-based XHTML Recommendation (5/31/2001) 

www.w3.org/TR/xhtmlll/ 

V XHTML 1.0 Recommendation (1/26/2000) 

www.w3.org/TR/xhtml 1/ 

Reading W3C specifications takes some learning and improves with repeated exposure. Don't let 
the formal language and notation of these documents put you off: After you understand what's up, 
you appreciate the precision and detail! But you may decide never even to look at one of these 
specifications — it's entirely up to you! 

The HTML 4.01 specification is the rulebook of HTML, as the XHTML 1 .0 specification is for XHTML — 
each one tells you exactly which elements you can use, which attributes go with those elements, and 
how you use elements in combinations to create such page structures as lists, forms, tables, and 
frames. This book uses the XHTML 1 .0 specification as its basis. 



When you put an X in front of HTML to get XHTML, you get a new, improved 
version of HTML based on the extensible Markup Language (XML). XML is 
designed to work and behave well with computers, software, and the 
Internet. 

The original formulation of HTML has some irregularities that can cause 
heartburn for software that reads HTML documents. XHTML, on the other 
hand, uses an extremely regular and predictable syntax that's easier for soft- 
ware to handle. XHTML will replace HTML someday, but HTML keeps on tick- 
ing. This book covers both varieties and shows you the steps to put the X in 
front of your own HTML documents and turn them into XHTML. 
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V Most HTML and XHTML markup is identical. 

In a few cases, HTML and XHTML markup looks a little different. 



few cases, HTML and XHTML markup must be used differently. 
This book shows how to create code that works in both HTML and XHTML. 



The types of (X)HTML 



The HTML and XHTML specifications use 
Document Type Definitions[DJDs) written in the 
Standard Generalized Markup Language 
(SGML) — the granddaddy of all markup — to 
define the details. 

In its earlier versions, HTML used elements for 
formatting; over time, developers realized that 

Formatting needed its own language (now 
called Cascading Style Sheets, or CSS). 

HTML elements should describe only a 
page's structure. 

This resulted in three flavors of HTML, which 
also apply to XHTML. These are the XHTML 
DTDs: 

XHTML Transitional: Uses HTML's elements 
to describe font faces and page colors. 
XHTML Transitional accounts for formatting 
elements in older versions of HTML. 
Formatting elements in XHTMLTransitional 
are deprecated (considered obsolete) 
because the W3C would like developers to 
move away from them and to a combination 
of XHTML Strict and CSS. We use the 
XHTMLTransitional DTD for the markup in 
this book. 

i"* XHTML Strict: Doesn't include any elements 
that describe formatting. This version 
is designed to let CSS drive the page 
formatting. 



The CSS-with-XHTML Strict approach is an 
ambitious way to build Web pages, but in 
practice it has its pros and cons. CSS pro- 
vides more control over your page format- 
ting, but creating style sheets that work well 
in all browsers can be tricky. Chapter 9 
covers style sheets and the issues around 
using them in more detail. 

XHTML Frameset: Includes frames, which 
is markup that allows you to display more 
than one Web page or resource at a time in 
the same browser window. Frames are still 
used in some Web sites but are less popu- 
lar today than they were in the late 1990s. 
Our advice is to use them only if you must 
display information from multiple HTML 
documents at the same time in a single 
browser window. 

All Web browsers support all elements in HTML 
Transitional (and in XHTML 1.0 Transitional if 
proper tag formatting is used); you can choose 
to use elements from it or stick with (X)HTML 
Strict instead. If you use frames, you technically 
work with (X)HTML Frameset, but all elements 
still work the same way. 

This book covers all (X)HTMLtags in all versions 
(lumping them into one category called 
(X)HTML) because all real-world Web browsers 
support all three flavors. 
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Syntax and mtes 

[LGa straightforward language for describing Web page contents. XHTML 
s Iverrress demanding. Their components are easy to use — when you know 
how to use a little bit of (X)HTML. Both HTML and XHTML markup have three 
types of components: 

Elements: Identify different parts of an HTML page by using tags 

Attributes: Information about an instance of an element 

v 0 Entities: Non-ASCII text characters, such as copyright symbols (©) and 
accented letters (E) 

Every bit of HTML and/or XHTML markup that describes a Web page's con- 
tent includes some combination of elements, attributes, and entities. 

This chapter covers the basic form and syntax for elements, attributes, and 
entities. Parts II and III of the book detail how elements and attributes 

Describe kinds of text (such as paragraphs or tables) 
Create an effect on the page (such as changing a font style) 
*** Add images and links to a page 



Elements 

Elements are the building blocks of (X)HTML. You use them to describe every 
piece of text on your page. Elements are made up of tags and the content 
within those tags. There are two main types of elements: 

Elements with content made up of a tag pair and whatever content sits 
between the opening and closing tag in the pair 

V Elements that insert something into the page using a single tag 
laq pairs 

Elements that describe content use a tag pair to mark the beginning and the 
end of the element. Start and end tag pairs look like this: 

<tag>. . .</tag> 
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Content — such as paragraphs, headings, tables, and lists — always uses a tag 
pair: 



oks< 



( start tag (<ta g>) tells the browser, "The element begins here." 
i>* The end tag (</tag>) tells the browser, "The element ends here." 

The actual content is what occurs between the start tag and end tag. For 
example, the Red Wine Varietals page in Listing 1-1 uses the paragraph ele- 
ment (<p>) to surround the text of a paragraph: 

<p>Al though wines tend to be generically categorized as 

either "white" or "red," in reality, there is a 

collection of wine varietals each with its own 

distinguishing characteristics. The red category 

includes a robust collection of over 20 varietals, 

including: 
</p> 

Single tags 

Elements that insert something into the page are called empty elements 
(because they enclose no content) and use just a single tag, like this: 

<tag /> 

Images and line breaks insert something into the HTML file, so they use 
one tag. 

One key difference between XHTML and HTML is that, in XHTML, all empty 
elements must end with a slash before the closing greater-than symbol. This 
is because XHTML is based on XML, and the XML rule is that you close empty 
elements with a slash, like this: 

<tag/> 

However, to make this kind of markup readable inside older browsers, you 
must insert a space before the closing slash, like this: 

<tag /> 



This space allows older browsers to ignore the closing slash (since they don't 
know about XHTML). Newer browsers that understand XHTML ignore the 
space and interpret the tag exactly as intended, which is <tag/> (as per the 
XML rules). 

HTML doesn't require a slash with empty elements, but this markup is depre- 
cated. An HTML empty element looks like this: 



<tag> 
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Listing 1-1 uses the image element (<i mg />) to include an image on the 
page: 



"red_grapes.jpg" wi dth=" 75 " height="100" al t=" Red Grapes" 
ign="middle" hspace="5" /> 

The <i mg /> element references an image. When the browser displays the 
page, it replaces the <img /> element with the file that it points to (it uses an 
attribute to do the pointing, which is shown in the next section). Following 
the XHTML rule introduced earlier, what appears in HTML as <img> appears 
in XHTML as <i mg /> (and this applies to all single tag elements). 

You can't make up HTML or XHTML elements. Elements that are legal in 
(X)HTML are a very specific set — if you use elements that aren't part of 
the (X)HTML set, every browser ignores them. The elements you can use 
are defined in the HTML 4.01 or XHTML 1.0 specifications. 



Nesting 

Many page structures combine nested elements. Think of your nested ele- 
ments as suitcases that fit neatly inside one another. 

For example, a bulleted list uses two kinds of elements: 

Ii^ The <ul > element specifies that the list is unordered (bulleted). 
i>* The <1 i > elements mark each item in the list. 



When you combine elements by using this method, be sure you close the 
inside element completely before you close the outside element: 



<ul> 

<li>Barbera</li> 
<li>Brunello</li> 

</ul> 



Attributes 

Attributes allow variety in how an element describes content or works. 
Attributes let you use elements differently depending on the circumstances. 
For example, the <i mg / > element uses the s rc attribute to specify the loca- 
tion of the image you want to include at a specific spot on your page: 



<img src="red_grapes. jpg" width="75" height="100" a 1 1= " Red Grapes" 
align="middle" hspace="5" /> 
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In this bit of HTML, the <img /> element itself is a general flag to the browser 
that you want to include an image; the s rc attribute provides the specifics on 
k e you want to include — recLgrapes.jpgin this instance. Other 
(such as wi dth, height, a 1 i gn, and hspace) provide information 
about how to display the image, and the a 1 1 attribute provides a text alterna- 
tive to the image that a text-only browser can display. 



Chapter 7 describes the <i mg /> element and its attributes in detail. 

You include attributes within the start tag of the element you want them 
with — after the element name but before the ending sign, like this: 



<tag attribute="val ue" attribute="val ue"> 




XML syntax rules decree that attribute values must always appear in quota- 
tion marks, but you can include the attributes and their values in any order 
within the start tag or within a single tag. 



Every (X)HTML element has a collection of attributes that can be used with 
it, and you can't mix and match attributes and elements. Some attributes can 
take any text as a value because the value could be anything, like the location 
of an image or a page you want to link to. Others have a specific list of values 
the attribute can take, such as your options for aligning text in a table cell. 

The HTML 4.01 and XHTML 1.0 specifications define exactly which attributes 
you can use with any given element and which values (if explicitly defined) 
each attribute can take. 




Each chapter in Parts II and III covers which attributes you can use with each 
(X)HTML element. Also, see Appendix A for complete lists of deprecated 
(X)HTML tags and attributes. 



Entities 

Text makes the Web possible, but it has limitations. Entities are special char- 
acters that you can display on your Web page. 

Non-ASCU characters 

Basic American Standard Code for Information Interchange (ASCII) text 
defines a fairly small number of characters. It doesn't include some special 
characters, such as trademark symbols, fractions, and accented characters. 

For example, the list of white wine varietals in Figure 1-4 includes two 
accented e characters (e) and two u characters with umlauts (ii). 
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ASCII text 
can't 
represent 
all text 
characters, 
so HTML 
entities do 
instead. 
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• Chardonnay 

• Chenin Blanc 

• Fume Blanc 

• Gewurtztraminer 

• Gruner Veltliner 




• Marsanne 

• Muscat 

• Pinot Blanc 

• Pinot Gris 

• Riesling 

• Sauvignon Blanc 

• Semilion 

• Trebbiano 

• Viognier 

•e] Done j My Computer 





ASCII text doesn't include either the accented e or the umlauted u, so HTML 
uses entities to represent them instead. The browser replaces the entity with 
the character it references. Each entity begins with an ampersand (&) and 
ends with a semicolon (;). The following markup shows the entities in bold: 



<html> 
<head> 

<title>Wine Vari etal s</ti tl e> 
</head> 



<body bgcolor="#FFFFFF"> 
<h2>Whi te Vari etal s</h2> 



<ul> 




<1 


> Chardonnay</l i> 


<1 


>Chenin Blanc</li> 


<1 


>Fumé Blanc</li> 


<1 


>Gew&uuml ;rztraminer</li> 


<1 


>Gr&uuml ;ner Vel tl i ner</l i > 


<1 


>Marsanne</l i > 


<1 


>Muscat</li> 


<1 


>Pi not Blanc</li> 


<1 


>Pi not Gris</li> 


a 


>Reisling</li> 


a 


>Sauvignon Blanc</li> 


<i 


>Sémi 1 1 on</l i > 


<i 


>Trebbi ano</l i > 


<i 


>Viognie</li> 


</ul> 





</body> 
</html> 
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The entity that represents the e with the acute accent isé, and the 
entity that represents the umlauted u is &uuml ; . 



character codes 



The encodings for the ISO-Latin-1 character set are supplied by default, and 
related entities (a pointer to a complete table appears in Table 1-1) can be 
invoked and used without special contortions. But using the other encodings 
mentioned in Table 1-1 requires inclusion of special markup to tell the browser 
it must be ready to interpret Unicode character codes. (Unicode is an interna- 
tional standard — ISO standard 10646, in fact — that embraces enough charac- 
ter codes to handle most unique alphabets, plus plenty of other symbols and 
nonalphabetic characters as well.) This special markup takes the form <meta 
http-equi v="Content-Type" content="text/html ; charset=UTF 8">; 
when the value forcharsetis changed to U T F - 8 , you can reference the 
common Unicode code charts shown in Table 1-1. 



Table 1-1 Online Pointers to (X)HTML Character Codes 

Name URL 



Unicode Code Charts www .unicode.org/charts/ 



ISO-Latin-1 
character set 


www . html 


help.com/reference/charse 


il 


Greek characters 


www.un" 


c 


:ode.org/charts/PDF/U0370. 


pdf 


Currency symbols 


www.un" 


c 


:ode.org/charts/PDF/U20A0. 


pdf 


Miscellaneous symbols www.un" 


c 


:ode. org /cha rts/PDF/U 2600. 


pdf 


Arrow characters 


www . uni code .org/charts/PDF/U27F0. 
www .uni code .org/charts/PDF/U2900. 


pdf 
pdf 



Mathematical Search math at www .uni code. org/charts/ 

characters (there are six different, relevant code charts) 



General punctuation www .uni code. org/charts/PDF/U2000. pdf 



laq characters 

HTML-sawy software assumes that some HTML characters, such as the 
greater-than and less-than signs, are meant to be hidden and not displayed 
on your finished Web page. The following entities display characters that 
normally are part of the hidden HTML markup: 

I less-than sign (<): &1 1 ; 

greater-than sign (>): &gt ; 
I ampersand (&): &amp ; 
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The < and > signs are used in markup, but these symbols are instructions to 
the browser and won't show up on the page. If you need these symbols on the 
include the entities for them in your markup, like this: 



<p>The paragraph element identifies some text as a paragraph:</p> 
<p>&l t ; p&gt ; Thi s is a paragraph . &1 1; /p> </p> 

In the preceding markup, the first line uses tags to describe a paragraph, and 
the second line shows how entities describe the < and > symbols. 

Figure 1-5 shows these entities as characters in a browser window. 



Figure 1-5: 

Entities let 
<, >, or& 
symbols 

appear in a 
browser 
window. 
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Comments include text in (X)HTML files that isn't displayed in the final 
page. Each comment is identified with two special sequences of markup 
characters: 

V Begin each comment with the string < ! - - 
End each comment with the string - - > 

In the following code, comments explain how each markup element functions 
and where it fits into the HTML markup hierarchy. 

Elements are organized into a structure: 

V Some elements can occur only inside other elements. 

f* Some elements are required for a well-structured (X)HTML document. 
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<html> <!-- This tag should always occur at or near the beginning of any 
wel 1 -formed HTML document --> 
- The head element supplies information to label the whole HTML 
document --> 

ne Vari etal s</ti tl e> <!-- The text in the title element appears 
in the title bar of the browser window when the page is 
viewed --> 

</head> <!-- closes the head element --> 



<body bgcol or="#FFFFFF"> <!-- The content that appears on any Web page 
appears or is invoked from inside the body element --> 
<h2>White Vari etal s</h2> <!-- heading elements start with the letter h 
followed by a number from J to 6 to indicate hierarchy. This 
is a level 2 heading, hi. --> 
<ul> <!-- This is an unordered list element, ul , which produces a 
bulleted list of list items, li --> 
<li> Chardonnay</l i> <!-- A whole bunch of individual list items --> 
<li>Chenin Blanc</li> 
<li>Fumé Blanc</li> 
<li>Gew&uuml ;rztraminer</li> 
<1 i>Gr&uuml ;ner Veltliner</li> 
<li>Marsanne</li> 
<li>Muscat</li> 
<li>Pinot Blanc</li> 
<li>Pinot Gris</li> 
<li>Reisling</li> 
<1 i>Sauvignon Blanc</li> 
<1 i >Sémi 1 1 on</l i > 
<li>Trebbiano</li> 
<li>Viognie</li> 
</ul> <!-- End of the unordered/bul 1 eted list --> 
</body> <!-- End of the body section --> 
</html> <!-- End of the HTML document --> 

The preceding document is broken into ahead and a body. Within each sec- 
tion, certain kinds of elements appear. Many combinations are possible, and 
that's what you see throughout this book! 



Organizing HTML text 

Beyond the division into head and body sections, text can be organized in 
plenty of ways in HTML documents. 

Document heads 

Inside the head section, you can define all kinds of labels and information 
besides a title, primarily to describe the document that follows, such as the 
character sets used, scripts to be invoked, and style information. The body 
section is where real content lives and most (X)HTML elements appear. 
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Document headings 

Headings (denoted using elements hi through h6) are different from the 
cument head. Individual headings structure the text that follows 
ereas the head identifies or describes the whole document. 





In the Wine Varietals example, the h2 element titles a list of grape varieties. 
Paraaraphs and more 

When you want running text on a Web page, the paragraph element, p (which 
includes the <p> and </p> tags), breaks text into paragraphs. You can also 

v* Force line breaks by using the break element <br />. 

V Create horizontal rules (lines) by using the < h r / > element. 

HTML also includes all kinds of ways to emphasize or identify text inside 
paragraphs; Parts II and III of this book show them. 



Lists 

HTML permits easy definition of unordered or bulleted lists. Various mecha- 
nisms to create other kinds of lists, including numbered lists, are also avail- 
able. Lists can be nested within lists to create as many levels of hierarchy as 
your list might need (perhaps when outlining a complex subject or modeling 
a table of contents with several heading levels you want to represent). 
Chapter 5 covers creating lists in more detail. 

Tables 

HTML includes markup for defining tables. Chapter 11 covers tables. Structure 
is part of how markup works, so within the definition of a table, you can 

Distinguish between column heads and table data 
V Manage how rows and columns are laid out 



Images in HTML documents 

Adding an image to any HTML document is easy. Careful and well-planned 
use of images adds a lot to Web pages. Chapter 7 shows how to grab images 
from files. Chapter 9 shows how to use complex markup to position and flow 
text around graphics. You also discover how to select and use interesting and 
compelling images to add interest and information to your Web pages. 
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ge's structure should help visitors find their way around collections 
ages, look for (and hopefully, find) items of interest, and get where 
they most want to go quickly and easily. Links provide the mechanism to 
bring people into your Web pages, so Chapter 6 shows how to 



Reference external items or resources 
v 0 Jump from one page to the next 
W Jump around inside a page 



Add structure and organization to your pages 

The importance of structure and organization goes up as the amount of 
information that you want to present to your visitors goes up. 



Navigation tools, (which establish standard mechanisms and tools for moving 
around inside a Web site) provide ways to create and present your Web page 
(and site) structure to visitors and mechanisms for users to grab and use 
organized menus of choices 

When you add everything up, your result should be a well-organized set of 
information and images that's easy to understand, use, and navigate. 
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In This Chapter 

Planning your Web page 
Writing some HTML 
Saving your page 

Viewing your page offline and online 
••••••••••••••••••••••••••••••••••••••••••••••••a 

Creating your very own Web page can seem a little daunting, but it's defi- 
nitely fun, and our experience tells us that the best way to get started is 
to jump right in with both feet. You might splash around a bit at first, but you 
can keep your head above water without too much thrashing. 

This chapter walks you through four simple steps to creating a Web page. We 
don't stop and explain every nuance of the markup you use — we save that 
for other chapters. Instead, we want to make you comfortable working with 
markup and content to create and view a Web page. 



Before \lou Get Started 

Creating HTML documents differs from creating word-processor documents 
in an application like Microsoft Word because you use two applications: 

V You create the Web pages in your text or HTML editor. 
You view the results in your Web browser. 

Even though many HTML editors, such as Dreamweaver and HTML-Kit, pro- 
vide a browser preview, it's still important to preview your Web pages inside 
actual Web browsers, such as Internet Explorer and Firefox, so you can see 
them as your end users will. It's a bit unwieldy to edit in one application and 
switch to another to look at your work, but you'll be switching like a pro from 
text editor to browser and back in (almost) no time. 
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To get started on your first Web page, you need two types of software: 



RBpoRS 



xt editor such as Notepad, TextPad, or SimpleText 




pad is the native text editor in Windows. TextPad is a shareware 
text editor available from www . textpad .com. (TextPad is used to create 
most of the figures in this chapter.) SimpleText is the native text editor 
in the Macintosh operating system. 

A Web browser 



We discuss these basic tools in more detail in Chapter 20. We recommend 
that you whip out your good ol' text editor to make your first page. Here 
are a couple of reasons why: 

An advanced HTML editor, such as FrontPage or Dreamweaver, often 
hides your HTML from you. For your first page, you want to see your 
HTML in all of its (limited) glory. 

You can make a smooth transition to a more advanced editor after 
you're a little more familiar with HTML markup, syntax, and document 
structure. 

i>* Word processors (such as Microsoft Word) usually store a lot of extra file 
information behind the scenes (for example, formatting instructions to 
display or print files). You can't see or change the extra information, but 
it interferes with your HTML. 



Creating a Page from Scratch 

Using HTML to create a Web page from scratch involves four straightforward 
steps: 

1. Plan your page design. 

2. Combine HTML and text in a text editor to make that design a reality. 

3. Save your page. 

4. View your page in a Web browser. 

So break out your text editor and Web browser and roll up your sleeves. 

Step 1: Planning a simple design 

We've discovered that a few minutes spent planning your general approach 
to a page at the outset of work makes the page-creation process much easier. 
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You don't have to create a complicated diagram or elaborate graphical dis- 
play in this step. Just jot down some ideas for what you want on the page and 
*Jldlw3*k.want it arranged. 

You don't even have to be at your desk to plan your simple design. Take a 
notepad and pencil outside and design in the sun, or scribble on a napkin 
while you're having lunch. Remember, this is supposed to be fun. 

The example in this chapter is our take on the traditional "Hello World" exer- 
cise used in just about every existing programming language. That is, the first 
thing you learn when tackling a new programming language is how to display 
the phrase Hello World on-screen. In our example, we create a short letter 
to the world instead, so the page is a bit more substantial and gives you more 
text to work with. Figure 2-1 shows our basic design for this page. 



HHfc - Hell© Uorld 



Figure 2-1: 

Taking a few 
minutes to 
sketch your 
page design 
makes 
writing 
HTML 
easier. 
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The basic design for the page includes four basic components: 
rviceable title: "Hello World" 




paragraphs explaining how the page's author plans to help the 
Earth meet its yearly quota of Znufengerbs 

A closing of "Sincerely" 

A signature 

Jot down some notes about the color scheme you want to use on the page. 
For effect, we decided that our example page should have a black back- 
ground and white text, and the title should be "Greetings From Your Future 
Znufengerb Minister." 

When you know what kind of information you want on the page, you can 
move on to Step 2 — writing the markup. 



Step 2: Writing some HTML 

You have a couple of different options when you're ready to create your 
HTML. In the end, you'll probably use some combination of these: 

IV If you already have some text that you just want to describe with HTML, 
save that text as a plain-text file and add HTML markup around it. 
V Start creating markup and add the content as you go. 

Our example in this chapter starts with some text in Word document format. 
We saved the content as a text file, opened the text file in our text editor, and 
added markup around the text. 

To save a Word file as a text document, choose FileOSave As. In the dialog 
box that appears, choose Text Only (*.txt) from the Save As Type drop-down 
list. 

Figure 2-2 shows how our draft letter appears in Microsoft Word before we 
convert it to text for our page. 



Listing 2-1 : The Complete HTML Page for the Zog Letter 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http: //www.w3. org/TR/xhtml 1/ DTD/xhtml 1 -transi ti onal . d t d " > 
<html xml ns="http: //www. w3.org/1999/xhtml "> 

<head> 

<title>Greetings From Your Future Znufengerb Mi ni ster</ti tl e> 

</head> 
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<body bgcol or="bl ack" text="whi te"> 
llo World</hl> 

has come to our attention that Earth has fallen well short of 
producing its yearly quota of Znufengerbs. To help you improve your 
production and establish a plentiful Znufengerb colony, I, Zog, the 
Minister of Agriculture of Grustland, will be arriving on your planet 
within the week along with my herd experts to take command of your 
Znufengerb enterprise. 
</p> 

<p>Do not fear, I have the highest expectations for a smooth transition 

from your current production of the creatures you call cows to our beloved 
Znufengerbs. The future of the galaxy hinges on Earth's ability to meet 
its Znufengerb quota, and I will do all in my power to make you the most 
productive source of Znufengerbs in the universe. 

</p> 

<p>I have studied your history extensively and feel that I am the best 
candidate for the position of Znufengerb Minister. I look forward to 
placing a Znufengerb in every home to bring you joy. 

</p> 

<p>Sincerely,<br /> 

Zog, Minister of Agriculture 
</p> 

</body> 
</html> 

The complete HTML page looks like Listing 2-1. 

The HTML markup includes a collection of markup elements and attributes 
that describe the letter's contents: 

t<" The <html > element defines the document as an HTML document. 

The <head> element creates a header section for the document. 

The <ti tl e> element defines a document title that is displayed in the 
browser's title bar. 

The <ti tl e> element is inside the <head> element. 

i>* The <body > element holds the text that appears in the browser window. 

The bgcol or and text attributes work with the <body> element. These 
attributes set the background color to black and the text color to white. 
(These attributes are deprecated, but really easy to use. Chapters 8 and 
9 how to achieve the same effects by using CSS, which is the recom- 
mended method.) 

The <hl> element marks the Hel 1 o Worl d text as a first-level heading. 
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Figure 2-2: 
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page in 
word- 
processing 
form. 
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The <p> elements identify each paragraph of the document. 
The < b r / > element adds a manual line break after Sincerely. 

Don't worry about the ins and outs of how all these elements work. They are 
covered in detail in Chapters 4 and 5. 

After you create a complete HTML page (or the first chunk of it that you want 
to review), you must save it before you can see your work in a browser. 



Step 3: Satfinq your paqe 

You use a text editor to create your HTML documents and a Web browser to 
view them, but before you can let your browser loose on your HTML page, 
you have to save that page. When you're just building a page, you should 
save a copy of it to your local hard drive and view it locally with your 
browser. 
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Choosing a location and name for your file 
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you save your file to your hard drive, keep the following in mind: 
need to be able to find it again. 




Create a folder on your hard drive especially for your Web pages. Call it 
Web Pages or HTML (or any other name that makes sense to you), and 
be sure you put it somewhere easy to find. 

i>* The name should make sense to you so you can identify file contents 
without actually opening the file. 

i>* The name should work well in a Web browser. 

Don't use spaces in the name. Some operating systems — most notably 
Unix and Linux (the most popular Web-hosting operating systems 
around) — don't tolerate spaces in filenames. 

In our example, we saved our file in a folder called Web Pages and named it 
(drum roll, please) zog_l etter . html , as shown in Figure 2-3. 



Figure 2-3: 
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.htm or .html 

You can actually choose from one of two suffixes for your pages: . html or 
. htm. (Our example filename, zog_l etter . html , uses the . html suffix.) 

The shorter . htm is a relic from the 8.3 DOS days when filenames could only 
have eight characters followed by a three-character suffix that described the 
file's type. Today, operating systems can support long filenames and suffixes 
that are more than three letters long, so we suggest you stick with . html . 
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Web servers and Web browsers handle both . htm and . html equally well. 



f f r(\ 1 filenames. 



one filename option. . html and . htm files are treated the same by 
and servers, but they're different suffixes, so they create different 
filenames. (The name zog_l etter . html is different from zog_l etter . htm.) 
This matters when you create hyperlinks (covered in Chapter 6). 



Step Vieurinq qowpaqe 

After you save a copy of your page, you're ready to view it in a Web browser. 
Follow these steps to view your Web page in Internet Explorer. (Steps may be 
different if you're using a different browser.) 

1. If you haven't opened your browser, do that now. 

2. Choose FileOOpen and click the Browse button. 

3. Navigate your file system until you find your HTML file, and then 
select it so it appears in the File name area. 

Figure 2-4 shows a highlighted HTML file, ready to be opened. 
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4. Click the Open button, and then click OK. 

The page appears in your Web browser in all its glory, as shown in 
Figure 2-5. 
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3 Greetings From Your Future Znufengerb Minister - Microsoft Internet Explorer 
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Figure 2-5: 
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Hello World 

It has come to our attention that Earth has fallen well short of producing its yearly quota of Znufengerb s. To help you 
improve your production and establish a plentiful Znufengerb colony, I, Zog. the Minister of Agriculture of Grustland, will 
be arriving on your planet within the week along with my herd experts to take command of your Znufengerb enterprise. 

Do not fear, I have the highest expectations for a smooth transition from your current production of the creatures you call 
cows to our beloved Znufengerbs. The future of the galaxy hinges on Earth's ability to meet its Znufengerb quota, and I 
will do all in my power to make you the most productive source of Znufengerbs in the universe. 

I have studied your history extensively and feel that I am the best candidate for the position of Znufengerb Minister I look 
forward to placing a Znufengerb in every home to bring you joy. 

Sincerely, 

Zog, Minister of Agriculture 



4) Done 
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You aren't actually viewing this file on the Web yet; you're just viewing a copy 
of it saved on your local hard drive. You can't give anyone the URL for this 
file yet, but you can edit and view the changes you make. 



Editing art Existing Web Page 

Chances are you'll want to change one thing (at least) about your page after 
you view it in a Web browser for the first time. After all, you can't really see 
how the page is going to look when you're creating the markup, and you 
might decide that a first-level heading is too big or that you really want 
purple text on a green background. 

To make changes to the Web page you've created in a text editor and are 
viewing in a browser, repeat these steps until you're happy with the final 
appearance of your page: 

1. Leave the browser window with the HTML page display open and go 
back to the text editor. 

2. If the HTML page isn't open in the text editor, open it. 

You should have the same file open in both the browser and the text 
editor, as shown in Figure 2-6. 
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Figure 2-6: 

Viewing an 
HTML file in 
your text 
editor and 
Web 
browser at 
the same 
time. 
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<!DOCTYPE HTML PUBLIC "-//F3C//D- 
" ht tp : //www . w3 . org/TR/RI ! 

<html> 
<head> 

< title>Greetings From Your F\ 
< /head > 

<body bgcolor* "black" text= " »h: 
<hl>Hello ¥orld</hl> 

<p>It has come to our attentioi 
producing its yearly quota c 
production and establish a [ 
Minister of Agriculture of C 
within the week along with i 
Znufengerb enterprise. 

</p> 

<p>Do not fear, I have the higl 
from your current product ioi 
Znu £ enger bs . The f u t ur e o f 1 
its Znufengerb quota, and I 
productive source of Znufenc 

</p> 

<p>I have studied your history 
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Hello World 



It has come to our attention that Earth has fallen well 
short of producing its yearly quota of Znufengerbs. 
To help you improve your production and establish a 
plentiful Znufengerb colony, I, Zog, the Minister of 
Agriculture of Grustland, will be arriving on your 
planet within the week along with my herd experts to 
take command of your Znufengerb enterprise. 

Do not fear, I have the highest expectations for a 
smooth transition from your current production of the 
creatures you call cows to our beloved Znufengerbs. 
The future of the galaxy hinges on Earth's ability to 
meet its Znufengerb quota, and I will do all in my 
power to make you the most productive source of 
Znufengerbs in the universe. 

I have studied your history extensively and feel that I 
am the best candidate for the position of Znufengerb 
Minister. I look forward to placing a Znufengerb in 



3. Make your changes to the HTML and its content in the text editor, 

4. Save the changes. 

This is an important step. If you don't save your changes, you won't see 
them in the Web browser. 

5. Move back to the Web browser and click the Refresh button. 





If you keep the HTML file open in both the text editor and the browser while 
you work, checking changes is a breeze. You can quickly save a change in the 
editor, flip to the browser and refresh, flip back to the editor to make more 
changes, flip back to the browser and refresh, and so on. 

In our example letter, we decided after our initial draft of the HTML page that 
we should add a date to the letter. Figure 2-7 shows the change we made to 
the HTML to add the date and the resulting display in the Web browser. 

This approach to editing an HTML page applies only to pages saved on your 
local hard drive. If you want to edit a page that you have already stored on a 
Web server, you have to save a copy of the page to your hard drive, edit it, 
verify your changes, and then upload the file again to the server, as discussed 
in the following section. 
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Figure 2-7: 

A change in 
the HTML is 
displayed in 
a browser 
after a quick 
save and 
refresh. 
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5th day of Zenon, 20936 



Hello World 



It has come to our attention that Earth has fallen well short of producing its yearly quota of Znufengerb s. To help you improve 
your production and establish a plentiful Znufengerb colony, I, Zog, the Minister of Agriculture of Grustland, will be arriving on 
your planet within the week along with my herd experts to take command of your Znufengerb enterprise. 

Do not fear, I have the highest expectations for a smooth transition from your current production of the creatures you call cows 
to our beloved Znufengerbs. The future of the galaxy hinges on Earth's ability to meet its Znufengerb quota, and I will do all in 
my power to make you the most productive source of Znufengerbs in the universe. 

I have studied your history extensively and feel that I am the best candidate for the position of Znufengerb Minister. I look 
forward to placing a Znufengerb in every home to bring you joy. 

Sincerely, 

Zog, Minister of Agriculture 



Done 
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Posting \lour Paqe Online 

After you're happy with your Web page, it's time to put it online. Chapter 3 
includes a detailed discussion of what you need to do to put your page 
online, but to sum it up in a few quick steps: 



1. Find a Web hosting provider to hold your Web pages. 

Your Web host might be a company Web server or space that you pay an 
Internet service provider (ISP) for. If you don't have a host yet, double- 
check with the ISP you use for Internet access — find out whether you 
get some Web-server space along with your access. Regardless of where 
you find space, get details from the provider on where to move your 
site's files and what your URL will be. 

2. Use an FTP client or a Web browser to make a connection to your Web 
server. 

Use the username and password, as specified in the information from 
your hosting provider, to open an FTP session on the Web server. 

3. Copy the HTML Hie from your hard drive to the Web server. 

4. Use your Web browser to view the file via the Internet. 
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For example, to host our letter online at f tp . i o . com/~natanya, we used 
Internet Explorer to access the site and provided the appropriate name and 
I, which you get from your ISP. A collection of folders and files 



We copied the file to the server with a simple drag-and-drop operation from 
Windows Explorer to Internet Explorer. 

The URL for this page is http : //www . i o . com/~natanya/zog_l etter . html , 
and the page is now served from the Web browser instead of from a local file 
system, as shown in Figure 2-8. 



Figure 2-8: 

A file on a 
Web server 
is available 
to anyone 
with an 
Internet 
connection. 
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5th dayofZenon, 20936 



Hello World 



Greetings from your future benevolent dictator, Zog of Grustland. This 
correspondence is to advise you that I will be arriving on your planet 
along with my very large galactic army to take command of your planet 
within the week. 

Do not fear, I have the highest expectations for a peaceful transition from 
your current collection of uncooperative governments to a single 
dictatorship that will unify your world and give me some place to cultivate 
my pet Znufengerbs. Your current rulers will become assistants on my 
Znufengerb ranch and will be available to advise me during the transition, 
when they aren't feeding the calves or cleaning out stalls of course. 



Done 
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Chapter 3 has details on how to serve your Web pages to the world. 
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In This Chapter 

Planning your Web page 
Defining your Web site hierarchy 
Creating user-friendly navigation 
Hosting your site 

Uploading and editing your Web site 



The overall design of your site is the user interface (UI). When you design a 
good UI, you give users the tools to move through your site with minimum 
fuss. This chapter outlines standard Web site design principles for your HTML. 
These principles can ensure a usable and effective UI. 

The UI is the mechanism that gives a user access to the information on your 
Web site. Each UI is unique, but they're all made from the same components 
(text, graphics, and media files ), and they're all held together with HTML. 

Visitors probably won't return to your site if it 

Is hard to navigate 

Is cluttered with flashing text and rampant colors 
Doesn't help people find what they're looking for 

You've created a solid UI if 

i>* Your site's navigation is intuitive. 

u* Images and media accent your design without overpowering it. 
You do all you can to help people find the information they want. 

This chapter walks you through simple steps to design a Web site and your 
basic Web page. (Other chapters explain every nuance of the markup.) 
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tant first step in creating an effective UI for your site doesn't have 
anything to do with markup, but has everything to do with planning. Before 
your site grows too large (or before you even build your site if you haven't 
started yet), carefully identify your site's exact purpose and goals. When you 
know your site's scope and goals, you can better create an interface that 
embodies them. 

Before designing your site, ask yourself these questions: 

Why are you creating this site? 
i>* What do you want to convey to users? 
Who is your target audience? For example, 

• What's the average age of your users? 

• How well does your audience work with the Internet? 

How many pages do you need in your site? 

\S What type of hierarchy will you use to organize your pages? For example, 
you can create your site so users go through it linearly, or you can allow 
them to jump around from topic to topic. 



Design matters 



This chapter recommends good design princi- 
ples, but it's up to you to choose color schemes 
and the overall look and feel. What looks great 
to one person may be ugly to someone else. 

If you're building a site for your business, that 
site can provide the first impression for potential 
customers or clients. The site should reflect 
your business style. If you run an architecture 
firm, for example, strong lines and a clean look 
may be the best way to present your company 
image. If you run a flower shop, your site may be 
a bit more organic and decorated (okay, flowery) 
to remind visitors of what they can expect if they 
walk into your store. 

If you're newtoWeb design or graphics and you 
need a site that marks your business presence 



on the Web, consider getting help from a Web- 
design professional. Use images, layouts, and 
navigational aids they create to build and 
manage the site yourself. Once established, the 
distinctive and consistent look and feel of your 
site is easy to maintain. 

Regardless of who designs your site, take the 
time to get a critique of it from peers, friends, 
family members, and anyone else who is willing 
to be honest about how good (and even how 
bad) it looks. A negative-but-constructive cri- 
tique from someone who knows and respects 
you beats a "Gee, that's ugly" from someone 
whose business you are trying to acquire. 
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If you can answer these questions, you can better understand your site's 
goals and needs. For example, an online store may have these goals: 



isitors browse an online catalog and put items in a shopping cart. 

i>* Provide visitors a way to purchase the items in their cart online. 

u* Help users make smart purchasing decisions. 

Ease merchandise returns and exchanges. 

V Solicit feedback from users about products they want to see in the cata- 
log or ways to make the site better. 



This short list of goals also indicates the areas your site may include and the 
activities your site needs to support. 

Instead of having just a single area (such as a product catalog), your site 
might need some specialized areas, such as 



Online catalog and shopping cart 

Buying guides or other information that can help users make better pur- 
chasing decisions 

W A help-and-feedback section 

A set of tools to expedite returns and exchanges 



When you establish the goals for your site, you can identify the elements best 
suited for the site, such as 



i>* A navigation system that identifies the major areas of the site, which 
helps users 

• Quickly identify what part they're in 

• Move from one part of the site to others without getting lost 

A set of standard design elements, such as buttons, page-title styles, and 
color specifications, to keep the users oriented as they move from page 
to page in the same site 

f" A standard display for items in the catalog, including product-related 
information, such as product images and descriptions, prices, and avail- 
ability information 

u* Well-designed forms that help users find products in the catalog, purchase 
the items in their shopping carts, request a refund or help returning an 
item, and submit comments to the site 

f* Long text pages that offer extensive information on purchasing options, 
product returns, and other helpful information — but that are still easy 
to read and to navigate 
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en you add to an existing site, identify UI elements that 

• Meet the goals of the new section of the site 

• Complement the overall site UI design 
Design 

V Organization 



Mapping your site 

It's easier to get where you're going if you know how to get there. Mapping 
your Web site can be a vital step in planning — and later running — the site. 
This process involves two creative phases: 

Creating a visual guide on paper or electronically that you can use to 
guide the development of your site 

Creating a visual guide on your Web site to help visitors find their 
way around 

Both have their place in good UI design, so each gets its own section. 




Using a map for site development 

When you use a site map during the development of a Web site — even a Web 
site that includes only a few pages — you can identify 

v 0 Pages that you need to build 
How pages relate to each other 
I Navigation elements that you need 

As a bonus, a map provides you with a checklist of pages. 

For example, Figure 3-1 shows part of the visual map of the Citrixxperience 
Web site (www .citrixxperience. com/map. htm). 

This map shows that the site has several main sections. Three of those 
sections — home, practice exams, and study materials — are each further 
divided into subsections. Each subsection page lists information and links 
that are pertinent to that particular subsection. 
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Figure 3-1: 

The site 
map forthe 
Citrixxperi- 
ence Web 
site. 
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Building the site one piece at a time 

If you plan to build your Web site a page or section at a time, you can create a 
map of the final site and then decide which pages it makes the most sense to 
build first. When you have a good working idea of how your site will expand, 
you can plan for it during each stage. For example, suppose you create a site 
map for you company's Web site, and the site needs a Frequently Asked 
Questions section. If that section isn't quite finished when the site launches, 
disaster need not ensue — provided someone planned ahead to accommodate 
new sections and built that capability into the site. Just leave out links to that 
section of the site when you launch it. 

When the book examples section is ready, you 

*** Add the section to the site. 

u 0 Add a link to the main navigation elements. 

If you know the resources are coming, you can create a navigation scheme 
that easily accommodates the book examples section when it's ready to add. 
Without a site map and a complete plan for the site, however, integrating new 
sections can suck up lots of time and effort. 
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Don't create under construction sections that don't include much of anything 
except the hint that something will appear someday. Users are disappointed 
: merely hints at information it doesn't really offer. Instead, consider 
lall section of your home page to highlight "coming soon" items so 
visitors know new information will be available later on. 
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Using a map as a Visual guide for your users 

A site map can be a supplemental navigational tool that gives users a different 
way to find what they're looking for. A site map lays out all contents of your 
site so visitors can see all their options at once. 

People have many approaches to finding information. Give visitors as many 
options as you can (realistically) for navigating your site: 

f" Some people like to be led. 

Some people like to rummage around. 
V Some people like to see every possible option and choose one. 

Site maps grow as your site grows. If your site is large and complex, your map 
may take several screens to display. When you surf the Web, massive sites 
such as Mi crosoft .com, HP . com, and Amazon . com don't offer site maps 
because maps of their sites would be huge and unwieldy. But smaller Web 
sites (such as Symantec . com) use site maps effectively. 

You must decide whether a site map is a good navigation tool for your site. 
Here are some points to ponder as you make this decision: 



v 0 A site map may be unnecessary if you have only a few pages. 
A site map may be the best choice if 

• Your site has several sections. 

• You can't think of other ways to access your content. 



Building solid navigation 

The navigation you use on your site can make or break it. If visitors can't find 
what they're looking for on your site, they'll probably leave and never come 
back. The type of navigation you use on your site depends on 

f How many pages are on your site 

If you have only a few pages, your navigation might be a simple collec- 
tion of links on the home page that helps users jump to each page. 
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If your site has many pages organized into different sections, your home 
might link only to those sections (not to each page). 



For example, the Dummi es . com site houses a large collection of pages orga- 
nized as a variety of sections; it would be impractical to link to all the pages 
in any navigation scheme. Also, the site includes articles on a wide variety of 
topics, as well as book information. The site could be organized into books 
and articles, but visitors are more likely to look for information on a specific 
subject, so the site is organized by topic. The home page, shown in Figure 3-2, 
prominently displays these different topic areas on the left. 



Figure 3-2: 

The 
Dummies, 
com site is 
organized 
by topic. 
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When you click one of these topic areas, the remaining topic areas are avail- 
able in a navigation bar across the top of the page (as shown in Figure 3-3). 
You don't have to return to the home page to jump from topic to topic. 

Figure 3-3 shows that each topic has its own sub-navigation area (at left, echo- 
ing the layout of the home page) that lists subtopics within the topic. The links 
are different, but the general navigation scheme is consistent throughout the 
site. That tells visitors what to expect as they move around the site. 
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Figure 3-3: 

The main 
topic areas 
on this site 
are accessi- 
ble from the 
top naviga- 
tion bar. 
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In the United States business environment, everyone has a partner, 
Uncle Sam. The government regulates business and sets the rules for 
businesses to transact their operations. To keep in solid stead with 
Sam, you need to know what information to keep and for how long you 
should keep it (just in case you're chosen for an audit). 



Wake Up to Dreamweaver's Potential 



One ofthe more common mistakes new 
Web designers make is plunging into 
developing a site without thinking through all 
of their goals, priorities, budget, and design 
options. The instinct is to simply start 
creating pages, throw them all into one big 
directory, and then stung stuff to aether with 
links. 
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Saving Instant 
Messages 

Instant messaging is a relatively 
new feature that Outlook 2002 
supports Instant messages 
mayseem ephemeral because 
you can chat back and forth 
almost like a real conversation, 
but if you're chatting about 
something important — such as 
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The topmost navigation area of each page includes a regular collection of links 
that appears on every page of the site to help visitors quickly access important 
areas from anywhere: a site search, help, account information, and a shopping 
cart. Every page has the same set of links to information on the For Dummies 
Web site, the form to register for eTips, how to contact the publisher, the site 
copyright statement, and the site privacy policy. Like the shopping cart and 
help links, these links must be on every page, but need not be displayed 
prominently. Adding them to a consistent site footer keeps them accessible 
to visitors without obscuring key content for any given topic or subtopic. 

If you create a map to aid site development, it can also help you choose what 
kind of navigational tools to create for your site. Consider each page on the 
map in turn; list the links that each page must include. Normally, a pattern 
emerges that can help you identify the main navigation tools your site needs 
(such as links to all main topic areas and copyright information, as on the 
For Dummies site), as well as sub-navigation tools (such as links to subtopics 
on the topic pages). 

After you know what tools you need, you can begin to design a visual scheme 
for your UI. Do you want to use buttons across the top, buttons down the side, 
or both? Do you need a footer that links to copyright or privacy information? 
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If you have sections within sections within sections, how can you best help 
people navigate through them? Answering questions like these is the route to 
ivigation system that helps users find their way around your site — 
iem focus on what they came for, not on how to get there. 




Whatever navigation scheme you devise, always give your visitors a way to 
get back to your home page from wherever they are on the site. Your site's 
home page is the gateway to the rest of the site. If visitors get lost or want to 
start again, make sure they can get back to Square One with no trouble. 



After you design your site's navigation scheme and put together a few pages, 
ask someone who isn't familiar with your site to try to use it. To help them 
with their testing, give them a list of three or four tasks you'd like them to 
complete — pages to visit or a form to fill out, for example. If your test visitor 
gets lost or has lots of questions about how to navigate the site, you should 
rework your scheme. Your reviewer might also have suggestions on ways to 
make navigation features clearer and easier to use. You might know your site 
and its content too well to spot gaps in navigation that a first-time user will 
probably discover immediately. 
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Planning outside (inks 

The Web wouldn't be the Web without hyperlinks — after all, hyperlinks 
connect your site to the rest of the Web and turn a collection of pages into 
a cohesive site. But overusing or misusing links can detract from your site 
and even lose you some business. 

Choose your off-site (inks Wisely 

Internal linking is almost a walk in the park compared to external linking — 
after all, when you link to pages on your own site, the pages those links point 
to are under your control. You know what's on them today and what will be on 
them tomorrow, and even whether they will exist tomorrow. When you link to 
resources on someone else's site, however, all bets are off: 

You don't maintain those pages. 

f* You can't modify their content. 

V You certainly won't know when they will disappear. 

Neither will your visitors — until they slam into a404 File or 
directory not found message (the usual sign of a broken link that 
now goes nowhere). The text in 404 messages varies depending on the 
server hosting the Web site. 
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Links to other sites are more useful when they're stable and have less chance 
of breaking. We recommend these guidelines: 




to a section of a site, not to a specific page on the site. 

Pages come and go, but the general organization usually stays the same. 

Link to corporate Web sites. 

Corporate sites have more staying power than sites maintained by an 
individual. 

V Don't link directly to media files such as PDFs and images. 

If you want to link to resources on another Web site, link to the Web 
page that links to the resources instead of the actual media files. Sites 
often update the resources and give them new names. The page that 
links to the resource, however, is almost always certain to be updated 
to reflect new names. Therefore, the page is a safer linking bet. 

Linking to other sites implies your support or endorsement of those sites. When 
visitors follow links from your site to other sites, they assume you approve of 
that new site. That makes a couple of guidelines necessary: 

If you don't want to be associated with content on another site, don't 
link to the site. 

The only way to find out whether you approve of a seemingly relevant 
site is to visit it and check it out before you link. 

Periodically review your links. Be sure that 

• The sites' owners are the same. 

• The content is appropriate. 

When domain names expire, new owners may take them over and post 
new content that's either 

• Completely irrelevant 

• Damaging to your image, such as with pornography 
Craft useful (ink text 

The text you associate with links is as important as the links you use on your 
site. That text gives users a hint about where the link takes them so they can 
decide whether to go along for the ride. For example, Visit Dummi es . com 
to read more about this book is more helpful than Read more about 
this book. 
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The first example tells visitors that they're going to leave the current site to 
visit Dummi es . com and read more about a book there. The second just tells 
y're going to read more about the book — and they may be surprised 
emselves flung off one site and onto another. 




Generally, when you create link text, let users know the following: 

f Whether they're leaving your site 

What kind of information the page they're linking to contains 
i>* How the linked site relates to the current content or page 

The goal of your link text should be to inform users and build their trust. If 
your link text doesn't give them solid clues about what to expect from your 
links, they just won't trust your links — and won't follow them. 

Avoid the use of click here in any link you create. If your link text is well- 
crafted, you don't need the extra words to prompt the user to click a link. 
The link text should speak for itself. 



Hosting \lour Web Site 

The first (and most important) step in putting your pages online is finding 
someplace on the Web to put them on display — a host. In general, you have 
two choices for hosting your pages: 

V Host them yourself. 

Pay someone else to host them. 

The word host is used in the Web industry to mean a Web server set up to 
hold Web pages (and related files) so they can be accessed by the rest of the 
world. This chapter uses host as both 

Noun: The physical machine that holds the Web pages 
Verb: The act of serving up the Web pages 

You need to decide whether to host your own pages or to pay someone else a 
fee to host them for you. This chapter shows both approaches to hosting — 
and gives you the skinny on each. You can decide which option is best for you. 
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You aren't stuck with your hosting decision for life. If you find hosting your 
own pages overwhelming, you can move your files to a service provider 
^ersa). To decide which hosting option is best for you, consider 
js for the next year, but plan to review your needs in a few months. 



own pages 
^Jb|\r^ds 
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Hosting qow oWn Web site 

This section illustrates an average-sized site (up to about 100 pages) that 
doesn't include more than a couple of multimedia files and doesn't have any 
special security or electronic commerce (e-commerce) applications. 

If you need to run a complex site, such as a large corporate site or an online 
store, you need more expertise, equipment, and software than this section 
outlines. The following resources can help: 

v* Books such as E-Commerce For Dummies and Webmastering For Dummies, 
2nd Edition (both from Wiley Publishing) can get you started setting up 
e-commerce and other complex sites. 

Consult a Web professional who has practical experience building and 
maintaining complex Web sites. 

You can set up your own Web server and host your Web pages yourself. To 
do this, you need: 



9/ 



am 



A computer designated as your Web server: Web servers are often 
dedicated to this task, leaving word-processing and other activities to 
a different computer. 

Web-server software: Common Web-server software packages include 
Apache and Microsoft's Internet Information Server (IIS), called Internet 
Information Services in Windows 2000 and later. 

In the Web world, the term Web server refers to both 

• A dedicated computer (the actual hardware) 

• Web-server software 

You can't use one without the other. 

i>* A dedicated Internet connection: Your Web server isn't useful or reliable 
if it's connected to the Internet only when you fire up a dialup connection. 



If hosting a Web site yourself sounds a little complicated and expensive, 
you're right. Not only do you have to pay for the equipment and dedicated 
Internet connection, but you also must know how to set up and administer a 
Web server and keep all the pieces working 24/7. Consider using a hosting 
provider. 
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Using a hosting provider 





provider manages all the technical aspects of Web hosting, from 
e to software to Internet connections. You just manage your HTML 
pages. Back when the Web was young, hosting provider options were scarce, 
and what was available was expensive. The times have changed, and needs 
have grown, so reasonably priced hosting providers are abundant these days. 

If you decide to let someone else host your pages, you have two choices for 
how much you pay: 

f* Nothing: Some services actually host your pages for free. That's it; you 
pay zip, zero, nada to get your pages on the Web. What's the catch? You 
must pay in other ways, usually with advertising attached to your page. 

Something: Most Web-hosting services, however, charge you a fee, from 
a few dollars a month to triple digits a month. The trick to making the 
most of your hosting funds is to find just the right hosting service to 
meet your Web site needs. 

Read more about inexpensive Web hosting options in the Webmonkey article 
"Web Hosting for Under Ten Bucks." 

http://webmonkey.wi red.com/webmonkey/02/01/index4a .html ?tw=desi gn 



Getting your ovOn domain 

A domain name is the high-level address for any given Web site. Examples of 
domain names are mi crosof t . com, appl e . com, w3c . org, and dummi es .com. 

You might want your own domain name (hence your own domain) that reflects 
your business name (or even your personality). If you don't get a domain name 
of your own, your pages will be part of someone else's domain name — usually 
your hosting provider's domain name. For example, a personal Web site hosted 
without a domain name at io.com has a top-level URL of 

http://www.io.com/~lanw 
With a domain name of 1 a nw .com, the same Web site would be hosted at 

http://www.lanw.com 

One's easier to remember than the other. Is that a good enough reason to have 
your own domain? Maybe . . . maybe not. The bottom line is that businesses 
or other entities that want to maintain a constant Web presence should prob- 
ably invest in a domain name; hobbyists or enthusiasts don't need one. 
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\\V ^ Any good hosting provider can give you detailed instructions on how to regis- 
ter a domain name in the provider's system or attach your domain name to 
site on its computers. If you're changing from one hosting provider 
er, your new provider should help you transfer your domain. Most 
providers either give you this information up front or have online help that 
will walk you through it. If it isn't immediately clear how to set up your domain, 
ask for help. If you don't get it, change providers. 




ter a aomc 
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Moi/ing files to your Web server 

After you secure a Web site host or decide to put up your own Web server, 
you need a way to move the HTML pages you create on your local computer 
to the Web server. This isn't a one-time activity either. As you maintain your 
Web site, you need to move files you've built on your local computer to the 
Web server to refresh your site. 

How you move files to your Web server depends entirely on how your Web 
server is set up. Normally, you have a couple of transfer options: 

f The File Transfer Protocol (FTP) 

A Web interface, provided by your hosting provider, for moving and 
managing files 



Ul design resources 



We recommend these Web sites and books on 
site and interface design if you want to create 
great Uls: 

v 0 For a crash course on Web design basics, 
read "Design Basics" from Webmonkey at 

http: / /hotwi red. lycos .con/webmonkey/ 
html /97/05/i ndex2a . html 

Webmonkey's "Site Redesign Tutorial" offers 
an interesting perspective on what it takes 
to rework a site's design. Read it at 

http: / /hotwi red. lycos .con/webmonkey/ 
design/site_building/ 
tutorials/tutorial 4. html 

Jakob Nielsen is committed to creating 
accessible Web content. His Web site, 
http://useit.com, is chock-full of 



resources and articles on creating acces- 
sible sites. 

V Hey, negative examples are useful too. Web 
PagesThatSuckguidesyouto good design 
by evaluating bad design. Be sure your site 
doesn't look like any of those featured at 

www . webpagesthatsuck . com. 

Web Design For Dummies, by Lisa Lopuck 
(Wiley), is another step in the direction of a 
sophisticated Web site with a knockout look. 

Web Usability For Dummies, by Richard 
Mander and Bud Smith (Wiley), can help you 
fine-tune your site to make it amazingly easy 
to use, which is a great help in keeping your 
visitors coming back for more. 
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Via FTP 

Of|these two options, FTP is almost always a possibility. FTP is the standard 
erring files on the Internet, and any hosting provider should give 
'access to your Web server. When you set up your Web site with 
your hosting provider, the provider usually gives you written documentation 
(either on paper or on the Web) that tells you exactly how to transfer files 
to your Web server. Included in that information is an FTP URL that usually 
takes the form ftp : //ftp .domain . com. 



You can use an FTP client such as WS_FTP (www . i pswi tch . com/Products/ 
WS_FTP/) or CuteFTP (www . gl obal scape. com/products/cut eft p/ind ex. 
asp) to open a connection to this URL. Your provider will give you a user- 
name and password to use to access your Web-server directory on the FTP 
site. Then you can move files to your Web site using the client's interface. It's 
really that easy. If you want to grab a copy of a file from your Web site and 
modify it, you just 

1. Use the FTP client's interface to download a copy. 

2. Make your modification. 

3. Use the FTP client's interface to upload the file. 

Each FTP client's interface is different, but they're all pretty straightforward. 
Chapter 20 includes more information on finding a good FTP client; so when 
you find one, spend a few minutes reading its documentation. 

You might not need a separate FTP client to move your files to your Web 
server: 



i>* Most newer Web browsers, such as current versions of Internet Explorer 
and Netscape 6, have some FTP capabilities built in. You can easily upload 
and download files. (You might not be able to make or delete directories.) 

Many Web utilities, such as Dreamweaver, have file-management 
capabilities. 



Via your hosting provider's Web site 

In the interest of usability and reducing technical support calls, many Web 
hosting providers have built Web pages that help you upload and manage 
your Web site files without using a separate FTP utility or even the FTP tools 
inside HTML editors. Most of these tools let you manage your site in various 
ways, such as 

Uploading and downloading files 

Creating and deleting directories 
i>* Moving files around 
V Deleting files 
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If you already have a hosting provider, find out whether it has a set of Web- 
based tools for managing your site. 



following in mind while you decide on a provider: 



Read the provider's documentation before you start to transfer your 
files. Every provider's interface is different. 

v 0 Most providers who have Web interfaces won't stop you from managing 
your site with FTP. 

Use FTP if the provider's interface is cumbersome or if you prefer FTP. 
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In this part . . . 

In this part of the book, we describe the markup and 
document structures that make Web pages workable 
and attractive. To begin with, we examine gross HTML 
document structure, including document headers and 
bodies, and how to put the right pieces together. After 
that, we talk about organizing text in blocks and lists. 
Next, we explain how linking works in HTML and how it 
provides the glue that ties the entire World Wide Web 
together. To wrap things up here, we also explain how to 
add graphics to your pages. Thus, we cover the basic 
building blocks for well-constructed, properly propor- 
tioned Web pages — and not by coincidence, either. 
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In This Chapter 

Creating a basic (X)HTML document structure 
Defining the (X)HTML document header 
Creating a full-bodied (X)HTML document 



7 he framework of a simple (X)HTML document consists of a head and 
body. The head provides information to the browser about the document, 
and the body contains the information that appears in the browser window. 
The first step to creating an (X)HTML document is defining the framework for 
that document. 

This chapter covers the major elements that you use to set up a basic 
(X)HTML document structure — including the head and body of the docu- 
ment. We also show you how to tell the browser which version of HTML or 
XHTML you're using. Although the version information isn't necessary for 
users, browsers use it to make sure that they correctly display document 
content for your users. 



Establishing a Document Structure 

Although no two (X)HTML pages are alike — each employs a unique combina- 
tion of content and elements to define the page — every properly constructed 
(X)HTML page needs the same basic document structure that includes 

V A statement that identifies the document as an (X)HTML document 
I is* A document header 
*** A document body 
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Every time you create an (X)HTML document, start with these three ele- 
ments; you can then fill in the rest of your content and markup to create an 

i Cjl^!^> 1 pase 

Although a basic document structure is a requirement for every (X)HTML 
document, creating it over and over again can be a little monotonous. Most 
(X)HTML-editing tools automatically set up the basic document structure for 
you when you open a new document. 



Labeling \lour (X) HTML Document 

At the top of your (X)HTML document should be the Document Type 
Declaration, or DOCTYPE declaration. This line of code specifies which version 
of HTML or XHTML you're using, which in turn lets the browsers know how 
to interpret the document. We use the XHTML 1.0 specification in this chap- 
ter because it's the latest specification and what most browsers and editing 
tools use. 



Adding an HTML DOCTi/PE declaration 

If you choose to create an HTML 4.01 document instead of an XHTML docu- 
ment, you can pick from three possible DOCTYPE declarations: 

V HTML 4.01 Transitional: This is the most inclusive version of HTML 
4.01, and it incorporates all HTML structural elements as well as all pre- 
sentation elements. 

< ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN" 
"http://www.w3.org/TR/htnl4/loose.dtd"> 

HTML 4.01 Strict: This streamlined version of HTML excludes all 
presentation-related elements in favor of style sheets as a mechanism 
for driving display. 

< ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 

HTML 4.01 Frameset: This version begins with HTML 4.01 Transitional 
and includes all the elements that make frames possible. 



< ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN 
"http://www.w3.org/TR/html4/franeset.dtd"> 
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Adding an XHTML DOCTi/PE declaration 

an XHTML document, use one of the following DOCTYPE declarations: 

V XHTML 1.0 Transitional: 

< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" 

"http://www.w3.org/TR/xhtnl 1/ DTD/xhtml 1-transitional .dtd"> 

XHTML 1.0 Strict: 

< ! DOCTYPE html " - //W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtnll/DTD/xhtnll-strict.dtd"> 

W XHTML 1.0 Frameset: 

< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Franeset//EN" 

"http://www.w3.org/TR/xhtnl 1 /DTD/xhtml 1-Traneset.dtd"> 

The XHTML DTD descriptions are similar to the HTML DTD descriptions and 
are defined in Chapter 1. 



The <htmt> element 



After you specify which version of (X)HTML the document follows, add an 
<html > element to hold all the other (X)HTML elements in your page: 


<! DOCTYPE html PUBLIC 


"-//W3C//DT 


D XHTML 1.0 Transi ti onal //EN" 




"http://www.w3.org/TR/xhtml 1/ DTD/xhtml 1-transitional .dtd"> 




<html> 








</html> 









Adding the XHTML namespace 

A namespace is a collection of names used by the elements and attributes of 
an XML document. XHTML uses the XHTML collection of names and there- 
fore needs a namespace, which looks like this: 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http://www.w3.org/TR/xhtml 1/ DTD/xhtml 1-transitional .dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml "> 
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</html> 
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Don't get bogged down by the meaning of namespaces. If you work with other 
XML vocabularies, you need to know about namespaces. For simple XHTML 
jts, you just need to know to include the XHTML namespace. So, of 
lat's exactly what the preceding code snippet shows you how to do! 



AMLi vocaD 
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Adding a Document Header 

The head of an (X)HTML document is one of the two main components of a 
document. (The body of the document is the other main component.) The 
head, or header, provides basic information about the document, including its 
title and metadata (which is information about information), such as keywords, 
author information, and a description. If you're going to use a style sheet with 
your page, you include information about that style sheet in the header. 

Chapter 8 includes a complete overview of creating Cascading Style Sheets 
(CSS) and shows you how to include them in your (X)HTML documents. 



The <head> element, which defines the page header, immediately follows the 
<html > opening tag: 



<! DOCTYPE html PUBLIC " 


7/W3C//DTD 


XHTML 1.0 Transi ti onal //EN" 




"http://www.w3 


. org/TR/xhtml 1/DTD/xhtml 1-transitional .dtd"> 




<html xmlns="http://www 


w3.org/1999/xhtml "> 




<head> 










</head> 










</html> 











GiVinq yow page a title 

Every (X)HTML page needs a descriptive title that tells the visitor what the 
page is all about. This title appears in the title bar at the very top of the 
browser window, as shown in Figure 4-1. The page title should be concise yet 
informative. (For example, My home page isn't nearly as informative as Ed's IT 
Consulting Service?) 

You define the title for your page by using the <ti tl e> element inside the 
<head> element: 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http://www.w3.org/TR/xhtml 1/DTD/xhtml 1-transitional . d t d " > 
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</head: 



<Jjtml xml ns=" http : / /www. w3.org/1999/xhtml "> 



le>Ed's IT Consulting Service</title> 



</html> 



Figure 4-1: 

(X)HTML 
page titles 
appear 

in a Web 
browser's 

window 

title bar. 
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Search engines use the contents of the <ti tl e> bar when they list Web pages 
in response to a query. Your page title may be the first thing that a Web surfer 
reads about your Web page, especially if she finds it through a search engine. 
A search engine will most likely list your page title with many others on a 
search results page, which means that you have one chance to grab the Web 
surfer's attention and convince her to choose your page. A well-crafted title 
can accomplish that. 

The title is also used for Bookmarks and in a browser's History; therefore, 
keep your titles short and sweet. 



Defining metadata 



The term metadata refers to data about data; in the context of the Web, it 
means data that describes the data on your Web page. Metadata for your 
page may include 



i>* Keywords 

v 0 A description of your page 

v 0 Information about the page author 

V The software application you used to create the page 
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Elements and attributes 

You define each piece of metadata for your (X)HTML page with 



<meta /> element 



The name and content attributes 

For example, the following elements create a list of keywords and a descrip- 
tion for a consulting-service page: 

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http://www.w3 . org/TR/xhtml 1/ DTD/xhtml 1-transitional . d t d " > 

<html xml ns="http: //www. w3.org/1999/xhtml "> 

<head> 

<title>Ed's IT Consulting Servi ce</ti tl e> 

<meta name=" keywords" content="IT consulting, MCSE, networking guru" /> 
<meta name="description" content="An overview of Ed's skills and services" /> 

</head> 
</html> 

Custom names 

The (X)HTML specification doesn't 

I**" Predefine the kinds of metadata you can include in your page 
Specify how to name different pieces of metadata, such as keywords and 
descriptions 

So, for example, instead of using keywords and descri pti on as names for 
keyword and description metadata, you can just as easily use kwrd and desc, 
like the following markup: 

< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http: //www. w3.org/TR/xhtml 1/ DTD/xhtml 1-transitional .dtd"> 

<html xml ns="http: //www. w3.org/1999/xhtml "> 

<head> 

<t i 1 1 e> Ed " s IT Consulting Servi ce</ti tl e> 

<meta name="kwrd" content="IT consulting, MCSE, networking guru" /> 
<meta name="desc" content="An overview of Ed's skills and services" /> 
</head> 
</html> 



^pS-STo^ If you can use just any old values for the <meta> element's name and conten 



t 

attributes, how do systems know what to do with your metadata? The answer 
is — they don't. Each search engine works differently. Although keywords and 
description are commonly used metadata names, many search engines may 
not recognize or use other metadata elements that you include. 
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Many developers use metadata to either 

e messages for others who may look at the source code of the 




Prepare for future browsers and search engines that use the metadata 

Although keywords and page descriptions are optional, search engines com- 
monly use them to collect information about your Web site. Be sure to 
include detailed and concise information in your <meta /> tag if you want 
your Web site discovered by search engine robots. 



Automatically redirecting 
users to another page 

You can use metadata in your header to send messages to Web browsers about 
how they should display or otherwise handle your Web page. Web builders 
commonly use the <meta /> element this way to automatically redirect page 
visitors from one page to another. For example, if you've ever come across a 
page that says Thi s page has moved. Please wait 10 seconds to be 
automatically sent to the new 1 oca ti on . (or something similar), 
you've seen this trick at work. 

To use the <meta /> element to send messages to the browser, here are the 
general steps you need to follow: 

1. Use the http equiv attribute in place of the name attribute. 

2. Choose from a predefined list of values that represents instructions 
for the browser. 

These values are based on instructions that you can also send to a 
browser in the HTTP header, but changing an HTTP header for a docu- 
ment is harder than embedding the instructions into the Web page 
itself. 



To instruct a browser to redirect users from one page to another, here's what 
you need to do in particular: 

1. Use the <meta /> element with http-equiv = " refresh". 

2. Adjust the value of content to specify how many seconds before the 
refresh happens and what URL you want to jump to. 

For example, the line shown in bold in the following markup creates a refresh 
that jumps to www .w3 .org after 15 seconds: 
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< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http://www.w3.org/TR/xhtml 1 /DTD/xhtml 1-transi ti onal . d t d " > 



1 ns=" http://www.w3.org/1999/xhtml "> 



<title>All About Markup</ti tl e> 

<meta http-equiv="ref resh" content="15; url= http://www.w3.org/" /> 

</head> 

<body> 

<p>This page is still in development. Until we are done, please visit 
the <a href="http: //www.w3 . org " >W3C Webs i te</a> for the definitive 
collection of markup-related resources. 

</p> 

<p>Pl ease wait 10 seconds to be automatically redirected to the W3C . </p> 
</body> 
</html> 




Older Web browsers may not know what to do with <meta / > elements that 
use the http-equiv element to create a redirector page. Be sure to include 
some text and a link on your page to enable a visitor to link manually to your 
redirector page if your <meta /> element fails to do the job. 

If a user's browser doesn't know what to do with your redirector information, 
the user simply clicks the link in the page body to go to the new page, as 
shown in Figure 4-2. 



Figure 4-2: 

When you 
use a 
<meta /> 
element 
to create 
a page 
redirector, 
include a link 
in case the 
redirector 
fails. 
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This page is still in development. Until we are done, please visit the W3C 
7i"irb^itir for the definitive collection of markup-related resources 

Please wait 10 seconds to be automatically redirected to the W3C. 



_ Done 



j My Computer 



You can use the http-equi v attribute with the <meta /> element for a vari- 
ety of other purposes, such as setting an expiration date for a page and speci- 
fying the character set (the language) the page uses. To find out what your 
http-equi v options are (and how to use them), check out the Dictionary of 
HTML META tags at the following URL: 



http://vancouver-webpages.com/META/metatags.detai 1 .html 
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you re re; 



set up your page header, create a title, and define some metadata, 
you re ready to create the (X)HTML markup and content that will show up in 
a browser window. The <body> element holds the content of your document. 

If you want to see something in your browser window, put it in the <body > 
element, like this: 

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http: //www. w3.org/TR/xhtml 1/ DTD/xhtml 1-transi ti onal . d t d " > 

<html xml ns="http: //www. w3.org/1999/xhtml "> 

<head> 

<title>Ed's IT Consulting Servi ce</ti tl e> 

<meta name="kwrd" content="IT consulting, MCSE, networking guru" /> 
<meta name="desc" content="An overview of Ed's skills and services" /> 

</head> 

<body> 

<p>Ed's IT Consulting Service Homepage</p> 

<p>Ed has over 20 years of IT consulting experience and is available 
to help you with any IT need you might have. From network design 
and configuration to technical documentation and training, you can 
count on Ed to help you create and manage your IT infrastructure. </p> 

<p>For more information please contact Ed by e-mail at ed@itguru.com or 
by phone at 555. 555. 5555. </p> 
</body> 

</html> 

Figure 4-3 shows how a browser displays this complete (X)HTML page: 

i>* The content of the <ti tl e> element is in the window's title bar. 

v 0 The <meta /> elements don't affect the page appearance at all. 

Only the paragraph text contained in the <p> elements (in the <body > 
element) actually appears in the browser window. 
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Only content 
in the 
<body> 
element 
appears in 
the browser 
window. 


Ed's IT Consulting Service Homepage 

Ed has over 20 years of IT consulting expenence and is available to help 
you with any IT need you might have. From network design and 
configuration to technical documentation and training, you can count on 
Ed to help you create and manage your IT infrastructure. 

For more information please contact Ed by e-mail at ed@itguru.com or 
by phone at 555.555.5555. 
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lists other (X)HTML attributes for document structure markup that 
you might find in HTML files. 



Table 4-1 


Additional (X)HTML Document Structure Attributes 


Name 


Function/Value 
Equals 


Value Type(s) 


Related Element(s) 


prof i 1 e 


Links to property 
definitions 


URI 


<head> 


scheme 


Describes how to 
decode data 


CDATA 


<meta /> 




DropBooks 



Chapter 5 



Text and Lists 



In This Chapter 

Working with basic blocks of text 
Manipulating text blocks 

Creating bulleted, numbered, and definition lists 




M^TML documents consist of text, images, multimedia files, links, and 
¥ W other pieces of content that you bring together into one page by using 
markup elements and attributes. You use blocks of text to create such docu- 
ment elements as headings, paragraphs, and lists. The first step in creating a 
solid HTML document is laying a firm foundation that establishes the docu- 
ment's structure. 



Here's a super-ultra-technical definition of a block of text: some chunk of con- 
tent that wraps from one line to another inside an HTML element. 

Your HTML page is a giant collection of blocks of text: 

V Every bit of content on your Web page must be part of some block 
element. 

f Every block element sits within the <body > element on your page. 

HTML recognizes several kinds of text blocks that you can use in your docu- 
ment, including (but not limited to) 

u* Paragraphs 
\S Headings 
v 0 Block quotes 



Formatting Text 



W Lists 



it* Tables 



v 0 Forms 
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ine elements versus text blocks 



7een inline elements and a 
block of text is important. HTML elements in this 
chapter describe blocks of text. An inline element 
is a word or string of words inside a block ele- 
ment (for example, text emphasis elements such 
as <em> or<strong>). Inline elements must be 



nested within a block element; otherwise, your 
HTML document isn't syntactically correct. 

Inline elements, such as linking and formatting 
elements, are designed to linkfrom or change the 
appearance of a few words or lines of content 
found inside those blocks. 



Paragraphs 

Paragraphs are used more often in Web pages than any other kind of text block. 




HTML browsers don't recognize the hard returns that you enter when you 
create your page inside an editor. You must use a <p> element to tell the 
browser to separate the contained block of text as a paragraph. 



Formatting 

To create a paragraph, follow these steps: 

1. Add <p> in the body of the document. 

2. Type the content of the paragraph. 

3. Add </p> to close that paragraph. 



Here's what it looks like: 



<!D0CTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http://www.w3.org/TR/xhtml 1/ DTD/xhtml 1 -transi ti onal .dtd"> 
<html xml ns="http: //www.w3 . org/1999/xhtml "> 

<head> 

<meta http-equi v="Content-Type" content="text/html ; charset=IS0-8859-l" /> 
<title>All About Blocks</title> 

</head> 



<body> 

<p>This is a paragraph. It's a very simple structure that you will use 

time and again in your Web pages. </p> 
<p>This is another paragraph. What could be simpler to create?</p> 

</body> 
</html> 



This HTML page includes two paragraphs, each marked with a separate <p> 
element. Most Web browsers add a line break and full line of white space 
after every paragraph on your page, as shown in Figure 5-1. 
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Figure 5-1: 

Web 
browsers 
delineate 
paragraphs 
with line 
breaks. 
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lalfe raph. It's a very simple structure that you will use time and again in your Web pages. 
This is another paragraph. What could be simpler to create? 
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Some people don't use the closing </p> tag when they create paragraphs. 
Although some browsers let you get away with this, leaving out the closing tag 

i>* Doesn't follow correct syntax 
Causes problems with style sheets 
I Can cause a page to appear inconsistently from browser to browser 

You can control the formatting (color, style, size, and alignment) of your 
paragraph by using Cascading Style Sheets (CSS), which we cover in 
Chapters 8 and 9. 

Alignment 

By default, the paragraph aligns to the left. You can use the align attribute 
with a value of center, ri ght, or j usti fy to override that default and con- 
trol the alignment for any paragraph. 



<p al i gn="center">Thi s paragraph is centered. </p> 

<p align="right">This paragraph is right-justified. </p> 

<p al i gn=" justi fy">Thi s paragraph is double-justified. </p> 



Figure 5-2 shows how a Web browser aligns each paragraph according to the 
value of the align attribute. 
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The align attribute has been deprecated (rendered obsolete) in favor of using 
CSS (see Chapter 8). 



oks 

Headings 



Headings break a document into sections. This book uses headings and sub- 
headings to divide every chapter into sections, and you can do the same with 
your Web page. Headings can 

V Create an organizational structure 

V* Break up the visual appearance of the page 

Give visual clues about how the pieces of content are grouped 

HTML includes six elements to help you define six different heading levels in 
your documents: 

If* <hl> is the most prominent heading (Heading 1) 
f <h6> is the least prominent heading (Heading 6) 

Follow heading order from highest to lowest as you use HTML heading levels. 
That is, don't use a second-level heading until you've used a first-level head- 
ing, don't use a third-level heading until you've used a second, and so on. If 
you want to change how headings appear in a browser, Chapter 8 and 
Chapter 9 show you how to use style sheets. 



This paragraph is centered. 



Figure 5-2: 

Use the 
align 
attribute 
with a 
paragraph 
to specify 
the 

horizontal 
alignment. 



This paragraph is double-justified. 



This paragraph is right-justified. 



Chapter 5: Text and Lists 



■— ^ |— ^ ioi create 

DropBodRs 



Formatting 

Tcicreate a heading, follow these steps: 



<h n> in the body of your document. 

2. Type the content for the heading. 

3. Add </hn>. 

Browser displays 

Every browser has a different way of displaying heading levels, and we cover 
that in the following two sections. 

Graphical browsers 

Most graphical browsers use a distinctive size and typeface for headings: 

i>* First-level headings (< h 1 >) are the largest (usually two or three font 
sizes larger than the default text size for paragraphs). 

Sixth-level headings (<h6>) are the smallest and may be two or three 
font sizes smaller than the default paragraph text. 



The following excerpt of HTML markup shows all six headings at work: 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http://www.w3 . org/TR/xhtml 1/ DTD/xhtml 1 -transi ti onal . d t d " > 
<html xml ns="http: //www.w3 . org/1999/xhtml "> 

<head> 

<meta http-equi v="Content-Type" content="text/html ; charset=IS0-8859-l" /> 
<title>All About Blocks</title> 
</head> 



<body> 

<hl>First-level heading</hl> 
<h2>Second-level headi ng</h2> 
<h3>Third-level heading</h3> 
<h4>Fourth-level heading</h4> 
<h5>Fifth-level heading</h5> 
<h6>Sixth-level heading</h6> 
</body> 
</html> 



Figure 5-3 shows this HTML page as rendered in a browser. 

You can use CSS to format such heading aspects as color, size, line height, 
and alignment. 

By default, most browsers use Times New Roman fonts for all headings. The 
font size decreases as heading level increases. (Default sizes for first- through 
sixth-level headings are, respectively, 24, 18, 14, 12, 10, and 8.) You can over- 
ride any of this formatting by using CSS. 
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Figure 5-3: 

Web 
browsers 
display 
headings in 
decreasing 
size from 
level one to 
level six. 
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fart browsers 

Text-only browsers use different heading conventions than graphical browsers 
because text-only browsers display all content using a single size and font. 



Controlling Text Blocks 

Blocks of text are the foundation for your page. You can break those blocks to 
better guide readers through your content. 



Block quotes 

A block quote is a long quotation or excerpt from a printed source that you 
set apart on your page. You use the <blockquote> element to identify block 
quotes: 



<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http: //www. w3.org/TR/xhtml 1/ DTD/xhtml 1- transi tional . d t d " > 
<html xml ns="http: //www. w3.org/1999/xhtml "> 
<head> 

<meta http-equi v="Content-Type" content="text/html ; charset=IS0-8859-l" /> 
<title>Famous Quotations</title> 

</head> 
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<body> 

An Inspiring Quote</hl> 

ihen I need a little inspiration to remind me of why I spend my days 
the classroom, I just remember what Lee Iococca said:</p> 
<blockquote> 

In a completely rational society, the best of us would be teachers 
and the rest of us would have to settle for something else. 
</blockquote> 

</body> 
</html> 

Most Web browsers display block-quote content with a slight left indent, as 
shown in Figure 5-4. 



Preformatted text 

Ordinarily, HTML ignores white space inside documents. A browser won't dis- 
play a block element's 

i>* Hard returns 
Line breaks 
Large white spaces 

The following markup includes several hard returns, line breaks, and a lot of 
space characters. Figure 5-5 shows that the Web browser ignores all of this. 

<p>This is a paragraph 

with a 1 ot of whi te space 

thrown in for fun (and as a test of course). </p> 

The preformatted text element (<pre>) instructs browsers to keep all white 
space intact as it displays your content (like the following sample). Use the 
<pre> element in place of the <p> element to make the browser apply all 
your white space, as shown in Figure 5-6. 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http: //www. w3.org/TR/xhtml 1/ DTD/xhtml 1 - trans i ti onal . d t d " > 
<html xml ns=" http : //www. w3.org/1999/xhtml "> 
<head> 

<meta http-equi v="Content-Type" content="text/html ; charset=IS0-8859-l" /> 
<title>White space</title> 

</head> 



<body> 

<pre>This is a paragraph 
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with a lot of white space 




ihrown in for fun (and as a test of course). 
</pre> 

</body> 
</html> 

You may want the browser to display white spaces in an HTML page where 
proper spacing is important, such as 




V Code samples 
Text tables 



You can nest <pre> elements inside <blockquote> elements to carefully con- 
trol how the lines of quoted text appear on the page. 



Line breaks 



By default, browsers usually wrap text that appears in block elements, such 
as paragraphs, headings, and block quotes. If a text line reaches the end of a 
browser window, the next word automatically starts a new line. You can man- 
ually control the end of a text line with a line break (denoted by the < b r / > 
element). 



Figure 5-4: 

Web 
browsers 
typically 
indent a 
block quote 
to separate 
it from 
paragraphs. 
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An Inspiring Quote 



When I need a little inspiration to remind me of why I spend my days in the classroom. I just remember what Lee Iococca said: 

In a completely rational society, the best of us would be teachers and the rest of us would have to settle for something 
else. 
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Function 

<br /> element is the HTML equivalent of the manual line break that 
n paragraphs and other blocks of text when you're working in a 
cessing program. When a browser sees a <br />, it ends the line 
there and starts the next line. 




The difference between a line break and a paragraph is that a line break doesn't 
use any special formatting that you can apply at the end or beginning of a para- 
graph, such as 

v 0 Extra vertical space 
V First-line indenting 



Formatting 

The following markup formats the lines of text in a poem with line breaks. 
The entire poem is described as a single paragraph, and the <br /> element 
marks the end of each line: 



< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http: //www.w3 . org/TR/xhtml 1/ DTD/xhtml 1 -transi ti onal . d t d " > 
<html xmlns=" http: //www. w3.org/1999/xhtml "> 
<head> 1 
<meta http-equiv="Content-Type" content="text/html ; charset=IS0-8859-l" /> 
<title> Shakespeare in HTML</title> 
</head> 



<body> 

<hl>Shakespeare ' s Sonnets XVIII: Shall I compare thee to a summer's day? </hl> 
<P> 

Shall I compare thee to a summer's day? <br /> 
Thou art more lovely and more temperate. <br /> 
Rough winds do shake the darling buds of May, <br /> 
And summer's lease hath all too short a date. <br /> 
Sometime too hot the eye of heaven shines, <br /> 
And often is his gold complexion dimm'd; <br /> 
And every fair from fair sometime declines, <br /> 
By chance or nature's changing course untrimm'd; <br /> 
But thy eternal summer shall not fade <br /> 
Nor lose possession of that fair thou ow'st; <br /> 
Nor shall Death brag thou wander'st in his shade, <br /> 
When in eternal lines to time thou grow'st: <br /> 
So long as men can breathe or eyes can see, <br /> 
So long lives this, and this gives life to thee. <br /> 
</p> 
</body> 
</html> 



Figure 5-7 shows how a browser handles each line break. In this example, the 
poem isn't left-indented because the <p> element replaces the <blockquote> 
element. 
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Using the 
<br/> 
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in block 
elements 
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summer's day? 



Shall I compare thee to a summer's day? 

Thou art more lovely and more temperate . 

Rough winds do shake the darling buds of May, 

And summer's lease hath all too short a date. 

Sometime too hot the eye of heaven shines. 

And often is his gold complexion dimm'd; 

And every fair from fair sometime declines. 

By chance or nature's changing course untrimm'd; 

But thy eternal summer shall not fade 

Nor lose possession of that fair thou ow'st; 

Nor shall Death brag thou wander ' st in his shade. 

When in eternal lines to time thou grow'st: 

So long as men can breathe or eyes can see, 

So long lives this, and this gives life to thee . 
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The horizontal rule element (<h r />) helps you include solid straight lines 
(rules) on your page. 

The browser creates the rule based on the < h r / > element, so users don't 
wait for a graphic to download. A horizontal rule is a good option to 

W Break your page into logical sections. 

v 0 Separate your headers and footers from the rest of the page. 
Formatting 

When you include an < h r / > element on your page, like the following HTML, 
the browser replaces it with a line, as shown in Figure 5-8. 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http://www.w3 . org/TR/xhtml 1/ DTD/xhtml 1-transitional . dtd " > 
<html xml ns="http: //www. w3.org/1999/xhtml "> 
<head> 

<meta http-equi v="Content-Type" content="text/html ; charset=IS0-8859-l" /> 
<title>Horizontal Rules</title> 

</head> 
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</p>This is a paragraph preceded by a horizontal rule.</p> 
</body> 

</html> 

A horizontal rule must always sit on a line by itself; you can't add the <h r /> 
element in the middle of a paragraph (or other block element) and expect the 
rule to just appear in the middle of the block. 

Attributes 

Four different attributes control the appearance of each horizontal rule: 

wi dth: Specifies line width either in pixels or by percentage of display 
area width (which we call "the page" in discussion that follows). 

For example, a rule can be 50 pixels wide or take 75 percent of the page. 

size: Specifies the height of the line in pixels. The default is 1 pixel. 

I align: Specifies the horizontal alignment of the rule as either 1 eft (the 
default), center, or right. 

If you don't define a width for your rule, it takes the entire width of the 
page. The alignment won't make any difference. 

n o s h a d e : Specif ies a solid line with no shading. 

By default, most browsers display hard rules with a shade. 

These formatting attributes are deprecated in favor of using CSS. 

This bit of HTML creates a horizontal rule that takes up 45 percent of the 
page, is 4 pixels high, aligned to the center, and has shading turned off: 

<p>This is a paragraph followed by a horizontal rule.</p> 

<hr wi dth="45%" size="4" al ign="center" noshade="noshade" /> 

<p>This is a paragraph preceded by a horizontal rule.</p> 

Figure 5-9 shows how the addition of these attributes can alter how a 
browser displays the rule. 

Figure 5-10 shows how you can use horizontal rules in the real world to high- 
light important content. The LANWrights, Inc., Web site uses colored hard 
rules to frame a key statement on the site's home page. The rules make the 
statement stand out from the rest of the page. 
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Figure 5-8: 

Use the 
<hr/> 
element 
to add 
horizontal 
lines to your 
page. 



caSgraph followed by a horizontal rule. 



This is a paragraph preceded by a horizontal rule. 
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Figure 5-9: 

Use the 
<hr/> 
attributes to 
better 
control how 
a browser 
displays the 
rule. 
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This is a paragraph followed by a horizontal rate. 



This is a paragraph preceded by a horizontal rule. 
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Figure 5-10: 

The 

LANWrights, 
Inc., Web 
site uses 
hard rules to 
draw your 
attention to 
important 
information 
on the page. 
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f LANWrights 

Network-Oriented Writing and Consulting 



LANWrights, Inc., a division of iLearning, Inc. , is dedicated to network-oriented writing, training, 
and consulting. Our projects cover Internet, networking, and Web technologies, plus a variety of 
related IT Certifications. LANWrights offers accurate, timely information on important 
technologies, and useful resources to a wide range of users. 



Books 

Descriptions of LANWrights' books, 
sorted by type, including pointers to 
associated Web sites. 

The Training Center 

Read about our classroom and online 
training offerings, demo our online 



Java Showcase 

Java examples and demonstrations 
of recent adventures on the cutting 
edge. 

About LANWrights 

Learn more about LANWrights, 
including available services and 




CSS gives you much more control over the placement of horizontal rules; you 
can even fancy them up with color and shading options. 



Ovqanizinq Information 



Lists are powerful tools for arranging similar elements together, and they give 
visitors to your site an easy way to hone in on groups of information. You can 
put just about anything in a list, from a set of instructions to a collection of 
navigational hyperlinks. 

Lists use a combination of elements — at least two components: 

A markup element that says "Hey browser! The following items are a list." 
i>* Markup elements that say "Hey browser! This is an item in the list." 

HTML provides for three different kinds of lists: 



i>* Numbered lists 
W Bulleted lists 
Definition lists 
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ed list consists of at least two items, each prefaced by a number. 
'& person numbers a list when the order of the items is important. 



You use two kinds of elements for a numbered list: 

The ordered list element (<ol >) specifies that this is a numbered list. 
V List item elements (< 1 i >) mark each item in the list. 

Formatting 

A numbered list with three items requires elements and content in the follow- 
ing order: 

1. <ol> 

2. <li> 

3. Content for the first list item 

4. </l i> 

5. <li> 

6. Content for the second list item 

7. </l i> 

8. <li> 

9. Content for the third list item 

10. </l i> 

11. </ol> 

The following markup defines a three-item numbered list: 

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http://www.w3.org/TR/xhtml 1/ DTD/xhtml 1 -transi ti onal . d t d " > 
<html xml ns="http: //www. w3.org/1999/xhtml "> 
<head> 

<meta http-equi v="Content-Type" content="text/html ; charset=IS0-8859-l" /> 
<ti tl e>Numbered Li sts</ti tl e> 
</head> 

<body> 

<hl>Things to do today</hl> 
<ol> 

<li>Feed cat</li> 
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<li>Wash car</li> 
<li>Grocery shopping</li; 



Figure 5-1 1 shows how a browser renders this markup. You don't actually 
have to specify a number for each item in the list; the browser identifies the 
list items from the markup and adds the numbers. 

If you swap the first two items in the list, they're still numbered in order 
when the page appears, as shown in Figure 5-12. 



<ol> 


<li>Wash car</li> 




<li>Feed cat</li> 




<li>Grocery shoppi ng</l i > 




</ol> 





Numbering 

Two different <ol > element attributes control the appearance of a numbered 
list: 

sta rt: Specifies the first number in the list. 
• The default starting number is 1. 
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Figure 5-11: 

Use the <ol> 
and <li> 
tags to 
create a 
numbered 
list. 
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You can specify any number as the start number for the new list. 

Specify a start number when you resume a list after an unnum- 
bered paragraph or other block element. 



type: Specifies the numbering style from the list. You can choose from 
five predefined numbering styles: 

• 1: Decimal numbers. 

• a: Lowercase letters. 

• A: Uppercase letters. 

• i : Lowercase Roman numerals. 

• I : Uppercase Roman numerals. 



The following markup uses ordered list elements and attributes to create a 



list that uses uppercase Roman numerals anc 
Roman numerals): 


begins numbering at 5 (V in 


<ol start="5" type=" 

<li>Wash car</li> 
<li>Feed cat</li> 


"> 







<li>Grocery shoppi ng</l i > 

</ol> 



Figure 5-13 shows how the attributes affect the list's appearance in a browser. 
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1 . Wash car 

2. Feed cat 

3 . Grocery shopping 



Figure 5-12: 

Web 
browsers 
set the 
numbers for 
your list 
according to 
the order 
items 
appear in 
the list. 



Part II: Formatting Web Pages with (X)HTML 



3 Numbered Lists - Microsoft Internet Explorer 


BUS 


File Edit View Favorites Tools Hdp 


• 



pBocfe 



Figure 5-13: 

The start 
and type 
attributes 
guide the 
appearance 
of a 
numbered 
list in a 
browser. 
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You have more control over your lists if you use CSS to define formatting. 
That's why the start and type attributes for list markup are deprecated; see 
Appendix A for information about deprecated attributes. 



Buffeted lists 

A bulleted list consists of one or more items each prefaced by a bullet (often a 
big dot; this book uses check marks as bullets). 

You use this type of list if the order of the presentation of the items isn't nec- 
essary for understanding the information presented. 

Formatting 

A bulleted list requires the following: 

u* The unordered list element (<ul >) specifies that you're creating a bul- 
leted list. 

A list item element (<1 i >) marks each item in the list. 

i>* The closing tag for the unordered list element (</ul >) indicates that the 
list has come to its end. 
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An unordered list with three items requires elements and content in the fol- 
lowing order: 



2. <li> 

3. Content for the first list item 

4. </l i> 

5. <li> 

6. Content for the second list item 

7. </l i> 

8. <li> 

9. Content for the third list item 

10. </l i> 

11. </ul> 

The following markup formats a three-item list as a bulleted list: 



< ! DOCTYPE html PUBLIC "-//W3C//DTD 


XHTML 1.0 Transi ti onal //EN" 


"http://www.w3 . org/TR/xhtml 1/ DTD/xhtml 1 -trans i ti onal . dtd " > 


<html xmlns="http: //www. w3.org/1999/xhtml "> 


<head> 






<meta http-equi v="Content-Typ 


e 


" content="text/html ; charset=IS0-8859-l" /> 


<title>Bulleted Li sts</ti tl e> 






</head> 






<body> 






<hl>Things to do today</hl> 






<ul> 






<li>Feed cat</li> 






<li>Wash car</li> 






<li>Grocery shopping</l i> 






</ul> 






</body> 






</html> 







Figure 5-14 shows how a browser renders this with bullets. 
Styles 

You can use the type attribute (deprecated) with the <ul > element to specify 
what kind of bullet you want the list to use. 

u* di sc: Solid circle bullets (the default) 

square: Solid square bullets 
V circle: Hollow circle bullets 
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list uses 
bullets 
instead of 
numbers to 
mark items. 
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Peed cat 
Wash car 
Grocery shopping 



Done 
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The addition of the type attribute to the bulleted-list markup just given 
changes the bullets from discs to squares, as shown in Figure 5-15. Here's 
what the relevant markup looks like: 

<ul type="square"> 

<li>Feed cat</li> 
<li>Wash car</li> 
<li>Grocery shoppi ng</l i > 
</ul> 
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Things to do today 



i Feed cat 
i Wash car 
i Grocery shopping 



Figure 5-15: 

Use the type 
attribute to 
change the 
bullet style 
for an 
unordered 
list. 
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Use CSS if you want more control over the formatting of your lists. 



nition lists 



Definition lists group terms and definitions into a single list and require three 
different elements to complete the list: 



<dl >: Holds the list definitions. 
<dt>: Defines a term in the list. 
i>* <dd>: Defines a definition for a term. 

You can have as many terms (defined by <dt>) in a list as you need. Each 
term can have one or more definitions (defined by <dd>). 

To create a definition list with two items requires elements and content in the 
following order: 

1. <dl> 

2. <dt> 

3. First term name 

4. </dt> 

5. <dd> 

6. Content for the definition of the first item 

7. </dd> 

8. <dt> 

9. Second term name 

10. </dt> 

11. <dd> 

12. Content for the definition of the second item 

13. </dd> 

14. </dl> 

The following definition list includes three terms, one of which has two 
definitions: 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http: //www.w3. org/TR/xhtml 1/ DTD/xhtml 1-transitional . d t d " > 
<html xml ns="http: //www. w3.org/1999/xhtml "> 
<head> 

<meta http-equi v="Content-Type" content="text/html ; charset=IS0-8859-l" /> 
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<hl>l 



<title>Definition Li sts</ti tl e> 
</head> 




>Markup Language Definitions</hl> 
<dl> 
<dt>SGML</dt> 

<dd>The Standard Generalized Markup Language</dd> 
<dt>HTML</dt> 

<dd>The Hypertext Markup Language</dd> 
<dd>The markup language you use to create Web pages. </dd> 
<dt>XML</dt> 
<dd>The Extensible Markup Language</dd> 
</dl> 
</body> 
</html> 

If you think the items in a list are spaced too closely together, you can either 

V Put two <br/> elements before each </li>or</dd> element to add 
more white space. 

W Use CSS styles to carefully control all aspects of your list appearance, as 
shown in Chapter 8. 



Nesting lists 

You can create subcategories by nesting lists within other lists. Some 
common uses for nested lists include 

Site maps and other navigation tools 
V Table of contents for online books and papers 
Outlines 

You can combine any of the three kinds of lists to create nested lists, such as 
a multilevel table of contents or an outline that mixes numbered headings 
with bulleted list items as the lowest outline level. 



The following example starts with a numbered list that defines a list of things 
to do for the day, and uses three bulleted lists to further break down those 
items into specific tasks: 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http: //www. w3.org/TR/xhtml 1/ DTD/xhtml 1 - trans i ti ona 1 . dtd " > 
<html xml ns="http: //www. w3.org/1999/xhtml "> 
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<head> 

<meta http-equi v="Content-Type" content="text/html ; 
le>Nested Lists</title> 



charset=ISO- 



r /> 



<hl>Thi ngs to do today</hl> 
<ol> 

<li>Feed cat</li> 
<ul> 

<li>Rinse bowl</li> 

<li>0pen cat food</li> 

<li>Mix dry and wet food in bowl</li> 

<li>Deliver on a silver platter to fluffy</li> 
</ul> 
<li>Wash car</li> 
<ul> 

<li>Vacuum i nteri or</l i > 
<li>Wash exterioK/1 i> 
<1 i >Wax exteri or</l i > 
</ul> 

<li>Grocery shoppi ng</l i > 
<ul> 

<li>Plan meal s</l i > 
<li>Clean out fridge</li> 
<li>Make list</li> 
<li>Go to store</li> 
</ul> 
</ol> 
</body> 
</html> 



All nested lists follows the same markup pattern: 

i>* Each list item in the top-level ordered list is followed by a complete 
second-level list. 

f* The second-level lists sit inside the top-level list, not in the list items. 
Figure 5-16 shows how a browser reflects this nesting in its display. 



^\NG/ As you build nested lists, watch your opening and closing tags carefully. Close 
&f first what you opened last is an especially important axiom here. If you don't 

open and close your tags properly, lists might not show consistent indents or 
numbering, or text might be indented incorrectly because a list somewhere 
was never properly closed. 



()2 Part I': Formatting Web Pages with (X)HTML 



3 Nested Lists - Microsoft Internet Exploi 




Figure 5-16: 

Nested lists 
combine 
lists for a 
multilevel 
organiza- 
tion of 
information. 



to do today 



1. Feed cat 

o Rinse bowl 

o Open cat food 

o Mix dry and wet food in bowl 

o Deliver on a silver platter to fluffy 

2. Wash car 

o Vacuum interior 
□ Wash exterior 
o Wax exterior 

3 . Grocery shopping 

o Plan meals 
o Clean out fridge 
o Make list 
o Go to store 
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Text Controls and Annotation 

Some general (X)HTML elements define general text controls or allow you to 
annotate documents. These are covered in Table 5-1. 



Table 5-1 


(X)HTML Text Controls and Annotation 


Element 


Common 
Name 


Empty? 


Category 


Description 


bdo 


Bidirectional 
algorithm 


No 


Language 
definition 


Controls direction 
of text display 
{ltr|rtl} (left-to- 
right, right-to-left) 


del 


Deleted text 


No 


Text control 


Marks deleted text 
in current draft 


ins 


Inserted text 


No 


Text control 


Marks inserted 
text in current draft 
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Element 
_ 1 _ 


Common 
Name 


Empty? 


Category 


Description 




Keyboard text 


No 


Text control 


Text to type at a 
keyboard 


samp 


Sample text 


No 


Text control 


Sample program 
output 


tt 


Teletype text 


No 


Text control 


Typewriter or tele- 










type output 


var 


Variable text 


No 


Text control 


Highlights input or 
output variables 



Mar</elou$ Miscellany 

Table 5-2 lists other text-related (X)HTML attributes that you might find in 
HTML files. 



Table 5-2 


Additional (X)HTML Text Attributes 




Name 


Function/ 
Value Equals 




Value 
Type(s) 


Related 
Elementd 


f 


ci te 


Specifies location 
source materials 


01 


URL 


<bl ockq 
<q> 


uote> 


ci te 


Explains reason for 
adds, deletes 


Text 


<del ><i ns> 




datetime 


Time stamps 
document content 


ISO date 


<del ><i ns> 



dir Specifies text direc- {ltr|rtl} All elements except 

tion for content <base><br /> 

<frame /><frameset> 
<i f rameXparam /> 
<scri pt> 

id Supplies unique ID All elements except 

identifierfor <base /><head> 

markup instances <html Xmeta /> 

<param /> 
<scri ptXstyl e> 
<title> 



(continued) 
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Table 5-2 (continued) 

Function/ Value Related 

Value Equals Type(s) Element(s) 

lang Names content Language All elements except 

language used code <base /Xbr /> 

<frame /><f rameset> 
<if rameXparam /> 
<scri pt> 

title Associates advisory Text All elements except 

info to content <base /><head> 

<html><meta /> 



<param /><script> 
<style><title> 
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Chapter 6 

wuunq to Online Resources 



In This Chapter 

: Creating simple links 
Opening linked pages in new windows 
Setting up links to locations within a Web page 
Creating links to things other than Web pages 

••••••••••••••••••••••••••••••••••••••••••••••••• 

M^yperlinks, or simply links, connect (X)HTML pages and other resources 
▼ m on the Web. When you include a link on your page, you allow visitors to 
travel from your page to another Web site, another page on your site, or even 
another location on the same page. Without external links, a page stands 
alone, disconnected from the rest of the Web. With external links, that page 
becomes part of an almost boundless collection of information. 



Basic Links 

To create a link, you need 

The Web address (called a Uniform Resource Locator, or URL) of the 
Web site or file you want to link. This usually starts with http : / /. 

f Some text in your Web page to label or describe the link. 

Try to ensure that the text you use says something useful about the 
resource being linked. 

An anchor element (<a>) with the href attribute to bring it all together. 

The element to create links is called an anchor element because you use 
it to anchor a URL to some text on your page. When users view your 
page in a browser, they can click the text to activate the link and visit 
the page whose URL you specified in the link. You insert the full URL in 
the href attribute. This tells the link where it needs to go. 
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For exam 



You can think of the structure of a basic link as a cheeseburger (or your pre- 
ferred vegan substitute). The URL is the cheese, the patty is the link text, and 
or tags are the buns. Tasty, yes? 



or example, if you have a Web page that describes HTML standards, you 
may want to refer Web surfers to the World Wide Web Consortium (W3C) — 
the organization that governs all things related to (X)HTML standards. A 
basic link to the W3C's Web site, www .w3.org, looks like this: 



<p>The <a href="http://www.w3.org">World Wide Web Consorti um</a> is the 
standards body that oversees the ongoing development of the XHTML 
specification. </p> 

You specify the link URL (http : / /www . w3 . org) in the anchor element's href 
attribute. The text (Wo rl d Wide Web Consorti urn) between the anchor ele- 
ment's open and close tags (<a> and </a>) labels or describes the link. 

Figure 6-1 shows how a browser displays this bit of markup. 



Figure 6-1: 

A paragraph 
with a link to 
the W3C. 
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The World Wide W eb Consortium is the standards 
body that oversees the ongoing development of the 
XHTML specification. 
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i My Computer 





Anchor elements aren't block elements 



Anchor elements are inline elements — they 
apply to a few words or characters within a 
block of text (the text that you want to use as a 
link) instead of defining formatting for blocks of 
text. The anchor element sits inside a paragraph 
(<p>) element. When you create a link, you 
should always create it within a block element, 
such as a paragraph, list item, heading, or even 
a table cell. Turn to Chapter 5 for more informa- 
tion on block elements. 

Although many Web browsers can display your 
anchors just fine (even if you don't nest them in 



block elements), some browsers don't handle 
this breach of (X)HTML syntax very well, such as 

Text-only browsers for Palm devices and 
mobile phones 

(<" Text-to-speech readers for the visually 
impaired 

Text-based browsers rely on block elements to 
properly divide the sections of your page. 
Without a block element, these browsers might 
display your links in the wrong places. 



® 
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You can also anchor URLs to images so users can click an image to activate a 
link. (For more about creating images that link, see Chapter 7.) 



iled discussion of the ins and outs of URLs, see Chapter 1. 





Link options 



You can link to a variety of online resources: 

v 0 Other (X)HTML pages (either on your Web site or on another Web site) 

)** Different locations on the same (X)HTML page 

it* Resources that aren't even (X)HTML pages at all, such as e-mail 
addresses, pictures, and text files 

Link locations, captions, and destinations have a big impact on link value. 
Chapter 3 covers best practices for using links in your site design. 

The kind of link you create is determined by where you link. 
Absolute (inks 

An absolute link uses a complete URL to connect browsers to a Web page or 
online resource. 

Links that use a complete URL to point to a resource are called absolute 
because they provide a complete, standalone path to another Web resource. 
When you link to a page on someone else's Web site, the Web browser needs 
every bit of information in the URL to find the page. The browser starts with 
the domain in the URL and works its way through the path to a specific file. 

When you link to files on someone else's site, you must always use absolute 
URLs in the href attribute of the anchor element (for example, http : / / 
www . webs ite.com/di rectory /page. html). 

Relative links 

A relative link uses a kind of shorthand to specify the URL for the resource 
where you're pointing. 



Use the following guidelines with relative links in your (X)HTML pages: 

V You create relative links between resources in the same domain 

Because both resources are in the same domain, you can omit domain 
information from the URL. 

A relative URL uses the location of the resource you're linking from 
to identify the location of the resource you're linking to (for example, 
page . html). 
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A relative link is similar to telling someone that he or she needs to go to the 
Eastside Mall. If the person already knows where the Eastside Mall is, he or 
^^l^^o^n't need additional directions. Web browsers behave the same way. 

If you use relative links on your site, your links still work if you change either 



Servers 
«>* Domain names 



Simple links 

You can take advantage of relative URLs when you create a link between 
pages on the same Web site. If you want to make a link from http : / /www. 
my site. com /home. html to http: //www . my si te . com /a bout . html , you 
can use this simplified, relative URL in an anchor element on home . html : 

<p>Learn more <a href="about.html ">about</a> our company. </p> 




When a browser sees a link without a domain name, the browser assumes the 
link is relative and uses the domain and path of the linking page to find the 
linked page. 



Site links 

As your site grows more complex and you organize your files into a variety of 
folders, you can still use relative links. But you must provide additional infor- 
mation in the URL to help the browser find files that don't reside in the same 
directory as the file from which you're linking. 

Use . . / (two periods and a slash) before the filename to indicate that the 
browser should move up one level in the directory structure. 

The markup for this process looks like this: 

<a href=" .. /docs/home. html >Documentati on home</a> 
The notation in this anchor element instructs the browser to: 

1. Move up one folder from the folder the linking document is stored in. 

2. Find a folder called docs. 

3. Find a file called home . html . 



^j^MSE/? When you create a relative link, the location of the file to which you link is 
always relative to the file from which you link. As you create your relative 
URL, trace the path a browser must take if it starts on the page you're linking 
from before it can get to the page to which you're linking. That path defines 
the URL for your relative link. 
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b resource, such as sites, pages, and images, has a unique URL. 
incorrect letter in your URL can lead to a broken link. Broken links 
lead to an error page (often the HTTP error 404 File or directory not 
found). 

URLs are so finicky that a simple typo breaks a link. 

If a URL doesn't work, try these tactics: 

f* Check the capitalization. Some Web servers (Linux and Unix most 
notably) are case sensitive (meaning they distinguish between capital 
and lowercase letters). These servers treat the filenames Bios, html 
and bios, html as different files on the Web server. That also means that 
browsers must use uppercase and lowercase letters when necessary. Be 
sure the capitalization in the link matches the capitalization of the URL. 

To avoid problems with files on your Web site, follow a standard naming 
convention. Often, using only lowercase letters can simplify your life. 

Check the extension. Bios, htm and Bios, html are two different files. If 
your link's URL uses one extension but the actual filename uses another, 
your link won't work. 

To avoid problems with extensions on your Web site, pick either .html 
or .htm and stick to that extension. 

V Check the filename, bi o . html and bi os . html are two different files. 

Cut and paste. Avoid retyping a URL if you can copy it. The best and 
most foolproof way to create a URL that works is 

1. Load a page in your browser. 

2. Copy the URL from the browser's address or link text box. 

3. Paste the URL into your (X)HTML markup. 



The importance of http:// in (X)HTML links 



Browsers make surfing the Web as easy as pos- 
sible. If you type www.sun.com, sun.com, or 

often even just sun, in your browser's address 
window, the browser obligingly brings up 
http : / /www . sun . com. Although this tech- 
nique works when you type URLs into your 



browser window, it won't work when you're 
writing markup. 

The URLs that you use in your HTML markup 
must be fully formed. Browsers won't interpret 
URLs that don't include the page protocol. If you 
forget the http : //, your link won't work. 
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customize links to 

f* Open linked documents in new windows 

u* Link to specific locations within a Web page 

f Link to items other than (X)HTML pages, such as 

• Portable Document Format (PDF) files 

• Compressed files 

• Word-processing documents 



Nert itiindoitis 

The Web works because you can link pages on your Web site to pages on 
other people's Web sites by using a simple anchor element. But when you 
link to someone else's site, you send users away from your own site. 

To keep users on your site, HTML can open the linked page in a new window. 
The simple addition of the target attribute to an anchor element opens that 
link in a new browser window instead of opening it in the current window: 

<p>The <a href="http://www. w3.org" target="_blank">World Wide Web Consortium</a> 
is the standards body that oversees the ongoing development of the XHTML 
specification. </p> 

When you give a ta rget attribute a _bl ank value, this tells the browser to 

1. Keep the linking page open in the current window. 

2. Open the linked page in a new window. 

The result of the target="_bl ank" attribute is shown in Figure 6-2. 
Pop-up windows irritate some users. 

You can use JavaScript to control the size and appearance of pop-up win- 
dows, as well as put buttons on them to help users close them quickly 
Chapter 12 covers pop-up windows in more detail. 
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Figure 6-2: 

Use the 
target 
attribute to 
open a new 
window for 
a linked file. 
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|^^kl »^ijJ"^M' ■'■v:ij:-.'ii:um is the standards body that oversees the ongoing development of the XHTML specification. 
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Leading the H eb to Its Full Potential... 

Activities | Technical Reports | Site Index | New Visitors | About 
W3C I Join W3C | Contact W3C 

The World Wide Web Consortium (W3C) develops interoperable technologies 
(specifications, guidelines, software, and tools) to lead the Web to its full potential. 
W3C is a forum for information, commerce, communication, and collective 
understanding. On this page, you'll find W3C news , links to W3C technologies and 
ways to get involved . New visitors can find help in Finding Your Wav at W3C . We 
encourage you to read the Prospectus and learn more about W3C . 



Locations in Web pages 

Locations within Web pages can be marked for direct access by links on 



The same page 
V 0 The same Web site 
V Other Web sites 




Keep these considerations in mind when adding links to Web pages: 

f* Several short pages may present information more conveniently for 
readers than a long page with internal links. 

Links within large pages work nicely for quick access to directories, 
tables of contents, and glossaries. 

i>* Intradocument linking works best on your own Web site, where you can 
create and control the markup. 

When you link to spots on someone else's Web site, you're at that 
person's mercy. That person controls the linkable spots. Your links will 
break if the site designer removes or renames any spot where you link. 
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Naming link locations 

Tojidentify and create a location within a page for direct access from other 
an empty anchor element with the name attribute, like this: 




<a name="top"X/a> 

The anchor element that marks the spot doesn't affect the appearance of the 
first-level heading. You can mark spots wherever you need them without wor- 
rying about how your pages look (or change) as a result. 

Linkina to named locations 

As we mention earlier, you can mark locations for direct access by links 

Within the same page 
Within the same Web site 
On other Web sites 

Within the same page 

Links can help users navigate a single Web page. Intradocument hyperlinks 
are such familiar features as 

Iu* Back to Top links 
Tables of contents 

An intradocument hyperlink uses a URL like this: 

<a href="#top">Back to top</a> 

^/nt^YrCS ^he P oun d s 'g n (#) indicates that you're pointing to a spot on the same page, 
not on another page. 

Listing 6-1 shows how two anchor elements work together to link to a spot on 
the same page. (Documents that use intradocument links are usually much 
longer. This document is shorter so you can easily see how to use the top 
anchor element.) 

Listing 6-1: Intradocument Hyperlinks 

<html> 
<head> 

<title>Intradocument hyperlinks at work</title> 
</head> 

<body> 

<hl><a name="top"X/a>Web-Based Trai ni ng</hl> 
<p>Given the importance of the Web to businesses and 
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other organizations, individuals who seek to improve 
job skills, or fulfill essential job functions, are 
urning to HTML and XML for training. We believe 
ihis provides an outstanding opportunity for 
participation in an active and lucrative adult and 
continuing education market. </p> 



<p><a href="#top">Back to top</a></p> 



</body> 
</html> 



Figure 6-3 shows how this HTML markup appears in a Web browser. If the 
user clicks the Back to Top link, the browser jumps back to the top spot - 
marked by < a name = "top"X/a>. 



Figure 6-3: 

Use anchor 
elements to 
mark and 
link spots on 
a page. 
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Web-Based Training 

Given the importance of the Web to businesses and other 
organizations, individuals who seek to improve job skills, or 
fulfill essential job functions, are turning to HTML and XML 
for training. We believe this provides an outstanding 
opportunity for participation in an active and lucrative adult 
and continuing education market. 



Back to top 



6] Done 
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Within the same Web site 

You can combine intradocument and interdocument links to send visitors to 
a spot on a different Web page within your site. For example, if you want to 
point to a spot named descri pti ons on a page named home .html on your 
site, the link looks like this: 

<p>Review the <a href="home.html#descriptions">document descri pti ons</a> 
to find the documentation for your particular product. </p> 

On other Web sites 

If you know that a page on another site has spots marked, you can use an 
absolute URL to point to spots on that page, like this: 

< p > F i n d out how to 

<a href =" http : //www. your company. com/ trai ni ng/ 

online. htm#register">register</a> for upcoming training 

courses led by our instructors. </p> 
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Be sure to check all links regularly to catch and fix the broken ones. 
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Directory Project provides a laundry list of free and commercial 
ake finding and fixing broken links easier: 



http: //dmoz . or g/Computers /Software/ Internet /Si te_Management/ Li nk_Management/ 



Non-HTML resources 



Links can connect to virtually any kind of files, such as 

**" Word-processing documents 
f" Spreadsheets 
PDFs 
Compressed files 
Multimedia 

Anchor elements usually aren't good links for multimedia files. 
A great use for non-HTML links is on software and PDF download pages. 

File downloads 

Non-Web files have unique URLs just like HTML pages. Any file on a Web 
server (regardless of its type) can be linked with its URL. 

For instance, if users need to download a PDF file named doc . pdf and a .zip 
archive called software. zip from a Web page, you use this HTML: 

<hl>Downl oad the new version of our software</hl> 
<p><a href="software.zi p">Software</a></p> 
<p><a href ="doc. pdf ">Documentati on</a></p> 

You can't know how any user's browser responds with a click on a link to a 
non-Web file. The browser may 

i>* Prompt the user to save the file 

Display the file without downloading (this is common for PDFs) 
Display an error message (if the browser can't handle the file) 

To help users download files successfully, you should provide them with 

As much information as possible about the file formats. 
Any special tools they need to work with the files. 
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pBooks 



To work with the contents of a Zip file, the users need a compres- 
sion utility, such as WinZip or Ziplt, if their operating systems do 



not natively support Zip files. 

To view a PDF file, users need the Adobe Acrobat Reader. 



You can make download markup more user-friendly by adding supporting 
text and links, like this: 



<hl>Downl oad the new version of our software</hl> 
<p> <a href="software.zip">Software</a> <br /> 
<b>Note:</b> 

You need a zip utility such as 
<a href="http://www.winzip.com">WinZip</a> or 
<a href="http: //www.maczi pi t.com">ZipIt</a> 

to open this file.</p> 
<p><a href="doc.pdf">Documentation</a> <br /> 

<b>Note:</b>You need the free 
<a href="http: //www. adobe. com/products/ 
acrobat/readstep2. html ">Acrobat Reader</a> 

to view this file.</p> 



Figure 6-4 shows how a browser renders this HTML and the dialog box it dis- 
plays when you click the software link. 



E-mail addresses 

A link to an e-mail address can automatically open a new e-mail addressed to 
exactly the right person. 
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This is a great way to help users send you e-mail with comments and 
requests. 



link uses the standard anchor element and href attribute. The 
value 6T the href attribute is the receiving e-mail address prefaced with 

mai 1 to : 





<p>Send us your 
<a href="mai 1 to: comments@niysi te . com">comments</a> . </p> 

The user's browser configuration controls how the browser handles an e-mail 
link. Most browsers automatically 

1. Open a new message window in the default e-mail program. 

2. Insert the address from the href attribute in the To field of the message. 

Unfortunately, Web page mai 1 to : links are a prime source of e-mail addresses 
for spammers. Creating a form to receive feedback is often a better idea. 



Marvelous Miscellany 



Table 6-1 lists other link-related (X)HTML attributes that you might find in 
HTML files (and their characteristics). 



Table 6-1 


Additional (X)HTML Link Attribute: 




Name 


Function/ 
Value Equals 


Value 
Type(s) 


Related 
Element(s) 


accesskey 


Shortcut key to 
follow link 


Text 


<a><area /> 
<button> 
<input /> 
<label> 
<1 egend> 
<textarea> 








charset 


Character set for 
linked items 


Text 


<a><link /> 
<scri pt> 


href 1 ang 


Language for linked 
items 


Language code 


<a><link /> 


type 


Advisory info for 
link content 


Text 


<a><link /> 
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In This Chapter 

Determining the right format for your images 

Adding images to Web pages 

Creating images and image maps that trigger links 



DropBooks,. 
Tinning 




*MJeb page designers use images to deliver important information, 
WW direct site navigation, and contribute to the overall look and feel of 
a Web page. But you need to use images properly or you risk reducing their 
effectiveness. 

When used well, images are a key element of your page design. When used 
poorly, they can make your page unreadable or inaccessible. 

This chapter is a crash course in using images on your Web pages. You find 
out which image formats are Web-friendly and how to use (X)HTML elements 
to add images to your Web pages. You also discover how to attach links to 
your images and how to create image maps for your Web page. 



The Rote of Images in a Web Page 

Images in Web sites may be logos, clickable navigation aids, or display con- 
tent; they may also make a page look prettier, or serve to unify or illustrate 
a page's theme. A perfect example of the many different ways images can 
enhance and contribute to Web pages is the White House home page at 
www .whitehouse.gov, shown in Figure 7-1. 
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Creating Web-Friendly Images 

You can create and save graphics in many ways, but only a few formats are 
actually appropriate for images that you intend to use on the Web. As you 
create Web-friendly images, you must account for file formats and sizes. 

Often, graphics file formats are specific to operating systems or software 
applications. But you can't predict a visitor's computer and software (other 
than a Web browser). So you need images that anyone can view with any 
browser. This means you need to use cross-platform file formats that users 
can view with any version of Microsoft Windows, the Mac OS, or Linux. 

Only these three compressed formats are suitable for general use on the Web: 

v 0 Graphics Interchange Format (GIF): Images saved as GIFs often are 
smaller than those saved in other file formats. GIF supports up to 256 
colors only, so if you try to save an image created with millions of colors 
as a GIF, you lose image quality. GIF is the best format for less-complex, 
nonphotographic images, such as line art and clip art. 

v 0 Joint Photographic Experts Group (JPEG): The JPEG file format sup- 
ports 24-bit color (millions of colors) and complex images, such as pho- 
tographs. JPEG is cross-platform and application-independent. A good 
image-editing tool can help you tweak the compression so you can strike 
an optimum balance between image quality and image file size. 
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f Portable Network Graphics (PNG): PNG is the latest cross-platform and 
application-independent image file format. It was developed to bring 
ther the best of GIF and JPEG. PNG has the same compression as GIF 
upports 24-bit color (and even 32-bit color) like JPEG. 



Internet Explorer 4, Netscape 4, and other older browsers don't support 
PNG, so many designers avoid it. 

Any good graphics-editing tool, such as those in Chapter 20, lets you save 
images in any of these file formats. You can experiment with each one to see 
how converting a graphic from one format to the other changes its appear- 
ance and file size, and then choose the format that produces the best results. 

Table 7-1 shows guidelines for choosing a file format for images by type. 



Table 7-1 


Choosing the 


3ight File Format 




File Format 


Best Used For 


Watch Out 




GIF 


Line art and other image 
with few colors and less 
detail. 


s Don't use this format if you 
have a complex image or 
photo. 


JPEG 


Photos and other image 


s Don't use with line 


art. Don't 



with millions of colors compromise too much quality 
and lots of detail. when you compress the file. 

PNG Photos and other images Don't use with line art. Older 

with millions of colors browsers don't support PNG, 
and lots of detail. so you may still lose Web 

surfers even though PNG 
offers the best balance 
between quality and file size. 



Optimizing images 



As you build graphics for your Web page, you 
need to maintain a healthy balance between file 
quality and size. Webmonkey has two good 
tutorials on trimming image file sizes and opti- 
mizing entire sites to download faster. For a col- 
lection of tips and tricks that can help you build 
pages that download quickly, review 



*<" Optimizing Your Images 

http : / /hotwi red . lycos .com/webmonkey/ 
99/15/i ndexOa . html 

(<" Site Optimization Tutorial 

http: //hotwi red . lycos .com/webmonkey/ 
design/site_building/ 
tutor i al s/tutori al 2. html 
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For a complete overview of graphics formats, visit 

"NM'Bffkier.com's "Examine Graphic Channels and Space" 

' TOp: //builder. cnet.com/webbuil ding/0-3883-8-4892140-1. html 
i>* Webmonkey's "Web Graphics Overview" 

http://webmonkey.wi red.com/webmonkey/01/28/indexla.html 



Adding an Image to a Web Page 




When an image is ready for the Web, you need to use the correct markup to 
add the image to your page. But you need to know where to store your image. 



You can store images for your Web site in several places. Image storage is 
best if your images are relative (stored somewhere on the Web site with your 
other (X)HTML files). You can store the images in the same root file as your 
(X)HTML files, which can get confusing if you have a lot of files, or you can 
create agraphics or i mages directory in the root file of your Web site. 

Relative links connect resources from the same Web site. You use absolute 
links between resources on two different Web sites. Turn to Chapter 6 for a 
complete discussion of the differences between relative and absolute links. 

Three compelling reasons to store images on your own site are 

Control: When the images are stored on your site, you have complete 
control over them. You know that your images aren't going to disappear 
or change, and you can work to optimize them. 

Speed: If you link to images on someone else's site, you never know 
when that site may go down or be unbelievably slow. Linking to images 
on someone else's site also causes the other site owner to pay for the 
bandwidth required to display it on your site. 

Copyright: If you link to images on another Web site to display them on 
your site, you may violate copyright law. (In this case, obtain permission 
from the copyright holder to store and display the images on your site.) 



Location of the imaqe 



Usinq the <imq /> element 



The image (<i mg / >) element is an empty element (sometimes called a single- 
ton tag) that you place on the page where you want your image to go. 
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An empty element has only one tag, with neither a distinct opening nor clos- 
ing tag. 

V^tJeNc^wing markup places an image named 07fg02-cd.jpg, which is 
saved in the same directory as the (X)HTML file, between two paragraphs: 



<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http: //www.w3 . org/TR/xhtml 1/ DTD/xhtml 1-transitional .dtd"> 
<html xml ns=" http : //www. w3.org/1999/xhtml "> 

<head> 

<meta http-equi v="Content-Type" content="text/html ; charset=IS0-8859-l" /> 
<title>CDs at Work</title> 

</head> 

<body> ^ 
<hl>CD as a Storage Medi a</hl> 

<p>CD- ROMs have become a standard storage option in today's computing world 

because they are an inexpensive and easy to use media. </p> 
<img src="07fg02-cd. jpg" /> 

<p>To read from a CD, you only need a standard CD-ROM drive, but to create 



Figure 7-2: 

Use the 
<img/> 
element to 
place 
graphics in 
a Web page. 



CDs, you need either a CD-R or a CD- R/W d 
</body> 
</html> 


"i ve.</p> 


A Web browser replaces the < i mg / > element with the image file 
the value for the src attribute, as shown in Figure 7-2. 
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CD-ROMs have become a standard storage option in today's computing world 
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To read from a CD, you only need a standard CD-ROM drive, but to create CDs, _ 
you need either a CD-R or a CD-R/W" drive. v 




fej Done < My Computer 





The src attribute is like the href attribute that you use with an anchor (<a>) 
element. The src attribute specifies the location of the image you want to 
display on your page. The preceding example points to an image file in the 
same folder as the HTML file referencing it. 
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Adding alternative text 



ve text describes the image so users who for some reason can't see 
es can access the alternative text and know what the image is. 
Adding alternative text is a good practice because it accounts for 



v* Visually impaired users who may not be able to see the images and rely 
on the alternative text for a text-to-speech reader to read to them. 

v 0 Users who access the Web site from a phone browser with limited graph- 
ics capabilities. 

f* Users with slow modem connections who don't display images. 




Some search engines and cataloging tools use alternative text to index 
images. 



Most of your users will see your images, but be prepared for those who won't. 
The (X)HTML specifications require that you provide alternative text to 
describe each image on a Web page. Use the a 1 1 attribute with the < i mg / > 
element to add this information to your markup, like this: 

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http://www.w3.org/TR/xhtml 1/ DTD/xhtml 1 -transi ti onal .dtd"> 
<html xml ns="http: //www.w3 . org/1999/xhtml "> 

<head> 

<meta http-equi v="Content-Type" content="text/html ; charset=IS0-8859-l" /> 
<title>Inside the Orchestra</title> 
</head> 

<body> 

<p>Among the diTferent sections oT the orchestra you will find:</p> 
<p><img src="07fg03-violin.jpg" alt="violin " /> Strings</p> 
<p><img src="07fg03-trumpet. jpg" alt="trumpet" /> Brass</p> 
<p><img src="07fg03-woodwi nds . jpg" al t="cl an' net and saxophone" /> 
Woodwi nds</p> 

</body> 

</html> 



When browsers don't display an image (or can't, in text-only browsers such 
as Lynx), they display the alternative text instead, as shown in Figure 7-3. 

When browsers show an image, some browsers, including Internet Explorer, 
Netscape, and Opera, show alternative text as a pop-up tip when you hold 
your mouse over an image for a few seconds, as shown in Figure 7-4. Firefox, 
however, does not. 
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Figure 7-4: 
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This means you can use alternative text to either describe the image to those 
who can't see it or provide useful or amusing information about the image. 

The W3C's Web Accessibility Initiative (WAI) includes helpful tips for creating 
useful and usable alternatives to visual content at www . w3 . org/TR/WCAGlO- 
TECHS/#gl -provi de-equi val ents. 
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Specifying image size 




se the hei ght and wi dth attributes with the <img /> element to 
owser know just how tall and wide an image is (in pixels): 

<p><img src="07fg03- trumpet . j pg " width="50" height="70" al t="trurnpet" 

/>Brass</p> 

Most browsers download the HTML and text associated with a page before 
they download all the page graphics. Instead of making users wait for the 
whole page to download, browsers typically display the text first and fill in 
graphics as they become available. If you tell the browser how big a graphic 
is, the browser can reserve a spot for it in the page display. This smoothes 
the change as graphics are added to the Web page. 

You can check the width and height of an image in pixels in any image-editing 
program or the image viewers built into Windows and the Mac OS. (You 
might also be able to simply view the properties of the image in either 
Windows or the Mac OS to see its height and width.) 

Another good use of the height and width attributes is to create colored 
lines on a page by using just a small colored square. For example, this 
markup adds a 10-x-10-pixel blue box to a Web page: 

< i mg src="07fg05-bl ue-box.gi f" alt="blue box" height="10" width="10" /> 

When the <i mg /> element height and width attributes equal the image 
height and width, it appears as a blue box in a browser window (like 
Figure 7-5). 
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However, a change to the values for hei ght and width in the markup turns 
this small blue box into a line 20 pixels high and 500 pixels long: 

< i mg src="07fg05-bl ue-box. gi f" alt="blue box" height="20" width="500" /> 

The browser expands the image to fit the height and width specifics in the 
markup, as shown in Figure 7-6. 
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Using this technique, you can turn a single image like the blue box (only IK in 
size) into a variety of lines and even boxes: 

This can ensure that all the dividers and other border elements on your 
page use the same color — they're all based on the same graphic. 

If you decide you want to change all your blue lines to green, you just 
change the image. Every line you've created changes colors. 

When you specify a height and width for an image that are different from the 
image's actual height and width, you rely on the browser to scale the image dis- 
play. This works great for single-color images like the blue box, but it doesn't 
work well for images with multiple colors or images that display actual pic- 
tures. The browser doesn't size images well, and you wind up with a distorted 



image when the markup doubles 


the image height and width: 




<p><img src="07fg03-t 


rumpet.jpg" 


width="200" h 


ei ght= " 300 " alt="trump 


et" /> 
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If you need several sizes of the same image, for example, a logo or navigation 
button, use the largest size image to make smaller versions in an image-editing 
^■^>l>l>»*ou can better control the final look and feel of the image. 

OKS 



Setting the image border 



By default, every image has a border of 1, which doesn't show up in most 
browsers until you turn that image into a link (as shown in the "Images That 
Link" section later). You can use the border attribute with the <i mg /> ele- 
ment to better control what border the browser displays around your image. 
This markup sets the border for the clarinet image to 10 pixels: 

< i mg src="07fg03-woodwi nds . jpg" width="50" height="70" al t = " c 1 ari net and saxo- 
phone" border="10" /> 

The browser uses this border on all four sides of the image, as in Figure 7-8. 



Figure 7-8: 
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In Figure 7-8, the border is black and applies to all four sides of the image. If 
you want to control the color of the border or make the border appear differ- 
ently on each side of the image, you have two options: 

u* Build the border into the image in an image-editing tool. 

Use Cascading Style Sheets (CSS), which we cover in Chapter 8. 

If you use an image-editing tool to create your border, you can use the tool's 
features to create a patterned border or apply a unique effect. However, the 
extra information in the image may make it bigger. Carefully balance your 
image size and its appearance so it doesn't take too long to download. 
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If you use CSS to apply a border, your image won't get any bigger, but your 
border may not show up in older browsers that don't support CSS well. The 
u make depends on how crucial the border is to your image (if it's 
rtant, embed it in the image) and what browser you think your 
visitors use (newer browsers have better support for style sheets). 



Controlling image alignment 

The align attribute works with the < i m g / > element to control how your 
image appears relative to the text around it. The possible values for this 
attribute are 

top: Aligns the text around the image with the top of the image, 
f" mi ddl e: Aligns the text around the image with the middle of the image. 

bottom: Aligns the text around the image with the bottom of the image. 
v 0 left: The image sits on the left, and text floats to the right of the image. 

right: The image sits on the right, and text floats to the left of the image. 

By default, most browsers align images to the left and float all text to the 
right. The following markup shows how five different <i mg /> elements use 
the a 1 i gn attribute to change how text floats around the mouse images: 

<p> < i mg src="07fg09-mouse. jpg" alt="mouse with top-aligned text" 
height="105" width="65" align="top" /> 
This text is aligned with the top of the image. 

</p> 

<p> < i mg src="07fg09-mouse. jpg" alt="mouse with middle-aligned text" 
height="105" width="65" align="middle" /> 
This text is aligned with the middle of the image. 

</p> 

<p> < i mg src="07fg09-mouse . jpg" alt="mouse with bottom-aligned text" 
height="105" width="65" al i gn="bottom" /> 
This text is aligned with the bottom of the image. 

</p> 

<p> <img src="07fg09-mouse. jpg" alt="mouse with left-aligned text" 
height="105" width="65" align="left" /> 
This image floats to the left of the text. 

<7p> 

<p> <img src="07fg09-mouse. jpg" alt="mouse with right-aligned text" 
height="105" width="65" align="right" 7> 
This image floats to the right of the text, and overlaps with 
the image to the left. 

<7p> 
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Figure 7-9 shows how a browser interprets different alignment attributes. 




/ > attributes may not give you all the control of image alignment 
_)want. Chapter 1 1 shows tables and images used together. Chapter 8 
shows CSS properties that control how images sit on the page. 



Figure 7-9: 
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This text is aligned with the bottom of the image. 
■^This image floats to the left of the text. 
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Setting image spacing 

Most browsers leave about a pixel of white space between images and the 
text or other images next to them. You can give your images breathing room 
with 

The v s p a c e (vertical space ) attribute for top and bottom 
v 0 The h space (horizontal space) attribute for left and right 

The following HTML gives the mouse graphic 20 pixels of white space on 
either side and 25 pixels on the top and bottom: 

<P> 

This text doesn't crowd the image on top.<br /> 
< i mg src="07fg09-mouse. jpg" 
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hei ght=" 105 " width="65" hspace="20" vspace="25" 

alt="mouse on a white background" /> 
is text is a little further away from the sides. </p> 




Figure 7-10 shows how a browser adds space around the image. 

The default value for hspace and vspaceisl.If you want images so close 
together that their sides touch (like for a set of navigation buttons), set the 
value for these attributes to 0 to eliminate that extra 1 pixel of space. 
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You can use CSS to position images on a page. You can position images with 
accuracy and with control over placement, spacing, white space, and how 
text flows around the graphic. Chapter 9 has the details to position items. 



Images That Link 

Web pages often use images for navigation. They're prettier than plain- 
text links, and you can add both form and function on your page with one 
element. 



Iriqqmnty links 

To create an image that triggers a link, you substitute an < i m g / > element in 
place of the text you would anchor your link to. This markup links text: 



<p><a href="http://www.w3.org">Visit the W3C</aX/p> 
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This markup replaces the text Visit the W3C with an appropriate icon: 
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ef =" http : //www.w3.org"Ximg src=" w3.jpg" 

t="Visit the W3C Web Site" height="48" width="315" border="0" /></a> 



</p> 



The preceding markup creates a linked image to http : //www . w3 .org. In 
the preceding example, the alternative text now reads V i s i t the W3C Web 
Si te so users who can't see the image know where the link goes. When a 
user moves the mouse pointer over the image, the cursor changes from an 
arrow into a pointing hand (or any icon the browser uses for a link), as in 
Figure 7-11. 



Figure 7-11: 

Combine 
image and 
anchor 
elements to 
create a 
linked 
image. 



3 Image element basics - Microsoft Internet Explorer f-~jfn~|| X | 



File Edit View Favorites Tools Help 

QBack • Q [k] j^j ^Jj Search ^Favorites 




Visit the W3C Web Site | 



•6] http://www.w3.org/ 



2 My Computer 




A quick click of the image launches the W3C Web site. It's as simple as that. 

As shown earlier in the chapter, you should set the border of any image you 
use in a link to 0 to keep the browser from surrounding your image with an 
ugly blue line. Without the line, however, users need other visual (or alterna- 
tive text) clues so they know an image is a link. Be sure images that serve as 
links scream to the user (tastefully of course) "I'm a link!" 



Bulidlnq imaqe maps 

When you use an < i mg / > element with an anchor element to create a linking 
image, you can attach only one link to that image. To create a larger image 
that connects links to different regions on the page, you need an image map. 

To create an image map, you need two things: 

An image with several distinct areas that would be obvious to users. 
(For example, an image of a park might show a playground area, a picnic 
area, and a pond area.) 

V Markup to map the different regions on the map to different URLs. 
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Elements and attributes 

use the < i m g / > element to add the map image into your page, just as 
Jd any other image. In addition, you include the usema p attribute to 
■tfteNwowser know that there's image map information to go with the 
image. The value of the u semap attribute is the name of your map. 




You use two elements and a collection of attributes to define the image map: 

<map> holds the map information. The <map> element uses the name 
attribute to identify the map. The value of name should match the value 
of usemap in the <i mg /> element that goes with the map. 

< a r e a /> links specific parts of the map to URLs. The < a r e a / > ele- 
ment takes these attributes to define the specifics for each section of 
the map: 

• shape: Specifies the shape of the region (a clickable hot spot that 
makes the image map work). You can choose from rect (rectan- 
gle), circle, and poly (atriangle or polygon). 

• coords: Define the region's coordinates. A rectangle's coordinates 
include the left, right, top, and bottom points. A circle's coordinates 
include the x and y coordinates for the center of the circle as well 
as the circle's radius. A polygon's coordinates are a collection of x 
and y coordinates for every vertex in the polygon. 

• href: Specifies the URL to which the region links. This can be an 
absolute or relative URL. 

•alt: Provides alternative text for the image region. 

Markup 

This defines a three-region map called Na vMap linked to the 

navi gati on . gi f : 

< i mg src="navi gati on.gi f" width="302" hei ght="30" usemap="#NavMap" border="0" /> 

<map name="NavMap" /> 
<area shape="rect" coords=" 0,0,99,30" href="home.html " alt="Home" /> 
<area shape="rect" coords="102, 0,202, 30" href="about.html " alt="About" /> 
<area shape="rect" coords="202, 0,301, 30" href="products.html " 
al t=" Products " /> 

</map> 

Figure 7-12 shows how a browser displays this markup. 

When the mouse sits over a region in the map, the cursor turns into a point- 
ing hand Qust as it changes over any other hyperlink). So take advantage of 
the alternative text to include useful information about the link. 
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Figure 7-12: 

different 
areas of an 
image into 
linking 
regions. 
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<t^W E fify A common use for image maps is to turn maps of places (states, countries, 




cities, and such) into linkable maps. Webmonkey's image map tutorial at 

http: //webmonkey. wi red . com /webmonkey /96/40/i ndex2a.html pro- 
vides more details on optimizing image maps and maximizing this (X)HTML 
feature. 

Creating image maps by hand can be a tricky. You use an image editor to 
identify each point in the map and then create the proper markup for it. Most 
(X)HTML tools include utilities to help you make image maps. If you take 
advantage of one of these tools, you can create image maps quickly and with 
fewer errors. Find out more about (X)HTML tools in Chapter 20. 



Martetous Miscellany 

Table 7-2 lists other (X)HTML images and image maps attributes (along with 
other input-related tags that use image maps) that you might find in HTML 
files. 



Table 7-2 


Additional (X)HTML Image and Map Attributes 


Name 


Function/ 
Value Equals 


Value 
Typefs) 


Related 
Element(s) 


name 


Provides a name for 
usemap attribute 


CDATA 


<map> 


nohref 


Inactive areas on 
image maps 


"nohref" 


<area /> 


usemap 


Tells browser to run 
client-side map 


URI 


<img /> 
<input /> 
<object> 
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In this part . . . 

In this part of the book, we introduce and describe 
Cascading Style Sheets (CSS), a powerful markup lan- 
guage that is often used to supplement (X)HTML and to 
manage the way it looks in a Web browser. (X)HTML can 
reference CSS by including either an external style sheet 
or inline CSS markup within an (X)HTML document. 

Here, you start out by learning the many and various capa- 
bilities of CSS, about different kinds of style sheets, and 
about the rules for handling multiple style sheets when 
they're applied to a single Web page (that's where the 
Cascading in CSS comes from). Of course, you also learn 
how to build and use CSS for things like creating visual lay- 
outs, positioning individual items, and handling fonts. 
Because CSS also provides controls over color and modify- 
ing how text appears on the page, you learn how to deal 
with these capabilities as well. 

Tables are an important way to organize and represent 
data in (X)HTML. This part of the book shows basic table 
setup, structure, and syntax, and also explains how you 
can use CSS to manage table appearance. 
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In This Chapter 

Understanding cascading style sheets 

Introducing CSS 

Creating style rules 

Linking style rules to Web pages 

Introducing CSS properties 

Understanding inheritance and the style cascade 



rhe goal of Cascading Style Sheets (CSS) is to separate a Web page's style 
from its structure and to make it easier to maintain Web pages that 
you've created. The structural elements of a page, such as headings (<hl> 
through <h6>) and body text, don't have affect the look of those elements. By 
applying styles to those elements, you can specify the element's layout on the 
page and add design attributes (such as fonts, colors, and text indentation). 

Style sheets give you precise control over how structural elements appear 
on a Web page. What's even better is that you can create one style sheet for 
an entire Web site to ensure that the layout and look of your content is con- 
sistent from page to page. And here's the icing on this cake: Style sheets are 
easy to build and even easier to integrate into your Web pages. In fact, you 
can add style markup to individual (X)HTML elements (called inline style), 
create sequences of style instructions in the head of an (X)HTML document 
(called an internal style sheet), or refer to a separate standalone style sheet 
via some kind of link or other reference (called an external style sheet) in your 
(X)HTML document. There are lots of ways to add style to a Web page! 




As HTML evolves and as more Web sites transition to XHTML, the goal of the 
markup powers-that-be is to eventually deprecate (make obsolete) all format- 
ting markup, such as the <f ont> element, from HTML's collection of elements 
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ng CSS versus deprecated HTML 

ets (CSS) provide you with 



more flexibility and allow you to control align- 
ment, color, line height, kerning, and so forth in 
ways that HTML never could. Using CSS also 
allows you to separate formatting from content 
and fosters cleaner markup, better maintain- 
ability, and easiertroubleshooting. No two ways 
about it: CSS is better. 

However, there is a slight catch. CSS support 
appeared in Web browsers in the late 1990s. By 
now, most users have upgraded to browsers that 
support CSS fully. However, studies show that 
about 1 0 percent of users have not upgraded and 
may not upgrade soon. That means that you must 
decide whether that 10 percent falls into your 
target audience. If so, plan accordingly. 

For example, if you are creating an intranet site 
strictly for viewing by your co-workers, you can 



safely use CSS by requiring that all users use 
Internet Explorer (IE) 5.0 or a newer version. 
However, if you're creating a site that will be 
accessible to the public at large, you can't con- 
trol which browser your visitors use. A visitor 
who still uses IE 4.0, for example, can't view con- 
tent that is controlled by CSS — the text appears 
to run together without any visible formatting. 

Therefore, the best way to accommodate both 
old and new browsers is by using a CSS style 
sheet and deprecated HTML formatting tags. 
(Check out Appendix A at the end of this book, 
which covers all deprecated (X)HT 'ML elements 
and attributes.) The CSS style sheet overrides 
HTML formatting tags in newer browsers, so 
those deprecated tags work only when the 
browser doesn't recognize CSS. It's not an ele- 
gant solution, but it works! 



When you want tight control over the display of your Web pages, style sheets 
are the way to go: 

Generally, style sheets give you more flexibility than markup can. 

The HTML element collection won't include any more display-oriented 
tags in the future. 

Most modern browsers handle CSS well. However, some older browsers, such 
as the 4.0 Internet Explorer and Netscape Navigator browsers, have trouble 
displaying CSS correctly. Earlier browsers can't display CSS at all. If you know 
that many of your site's users still use one or more of these obsolete 
browsers, test your pages in these browsers to make sure they're readable. 



Advantages of Style Sheets 



HTML's formatting capabilities are limited, to say the least. When you design 
a page layout in HTML, you're limited to tables, font controls, and a few inline 
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styles, such as bold and italic. Style sheets provide lots of tools for formatting 
Web pages with precise control. With style sheets you can 

fully control every aspect of the display of your page: Specify 
items such as the amount of space between lines, character spac- 
ing, page margins, and image placement. You can also specify the posi- 
tioning of elements on your pages. 

v 0 Apply changes globally: You can guarantee consistent design across an 
entire Web site by applying the same style sheet to every Web page. 

Quickly and easily modify the look and feel of your entire site by chang- 
ing one document (the style sheet) instead of the markup on every page. 
Need to change the look of a heading? Redefine the heading's style 
attributes in the style sheet and save the sheet. The heading's look 
changes throughout your site. 

Instruct browsers to control appearance: Provide Web browsers with 
more information about how you want your pages to appear than you 
can communicate using HTML. 

f Create dynamic pages: Use JavaScript or another scripting language 
along with style sheets to create text and other content that moves, 
appears, or hides in response to user actions. 



What CSS can do for a Web paqe 

The gist of how style sheets work is this: 

1. You define rules in a style sheet that specify how you want content 
described by a set of markup to appear. 

For example, you could specify that every first-level heading (< h 1 >) be 
displayed in purple, Garamond, 24-point type with a yellow background 
(not that you would, but you could). 

2. You link style rules and markup. 

3. The browser does the rest. 

The current specification, CSS2.1, can 

v 0 Specify font type, size, color, and effects 
Set background colors and images 

Control many aspects of text layout, including alignment and spacing 

Set margins and borders 
it* Control list display 
v 0 Define table layout and display 
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I Automatically generate content for such standard page elements as 
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counters and footers 

trol cursor display 
Define aural style sheets for text-to-speech browsers 




What you can do u/ith CSS 

You have a healthy collection of properties to work with as you write your 
style rules. You can control just about every aspect of a page's display — 
from borders to font sizes and everything in between: 

Background properties control the background colors associated with 
blocks of text and with images. You can also use these properties to 
attach background colors to your page or to individual elements. 

Border properties control borders associated with the page, lists, 
tables, images, and block elements (such as paragraphs). You can spec- 
ify border width, color, style, and distance from the element's content. 

V Classification properties control how elements such as images flow on 
the page relative to other elements. You can use these properties to inte- 
grate images and tables with the text on your page. 

List properties control how lists appear on your page, such as 

• Managing list markers 

• Using images in place of bullets 



CSS3: Next-generation style sheets 



The next generation of CSS — CSS3 — is a col- 
lection of moc/u/es that address different aspects 
of Web-page formatting, such as fonts, back- 
ground colors, lists, and text colors. The first of 
these modules became standards (officially 
called Candidate Recommendations) in mid-2004. 
But the majority of CSS3 modules aren't expected 
to become Candidate Recommendations until 
late 2005 or 2006, and few browsers implement 
CSS3 features. In short, you don't need to worry 
about CSS3 — yet. 



The W3C has devoted an entire section of its 
Web site to this topic at www.w3.org/ 
sty 1 e/css. You can find general CSS infor- 
mation there, as well as keep up with the status 
of CSS3. The site links to good CSS references 
and tutorials, and includes information on soft- 
ware packages that can make your style sheet 
endeavors easier. 
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Margin properties control the margins of the page and margins around 
block elements, tables, and images. These properties extend the ulti- 
e control over the white space on your page. 



ding properties control the amount of white space around any block 
element on the page. When used with margin and border properties, you 
can create some complex layouts. 

V Positioning properties control where elements sit on the page, giving 
you the ability to place elements in specific places on the page. 

Size properties control how much space (in height and width) that your 
elements (both text and images) take up on your page. They're espe- 
cially handy for limiting the size of text boxes and images. 

V Table properties control the layout of tables. You can use them to con- 
trol cell spacing and other table-layout specifics. 

«" Text properties control how text appears on the page. You can set such 
properties as font size, font family, height, text color, letter and line spac- 
ing, alignment, and white space. These properties give you more control 
over your text with style sheets than the font HTML element can. 



Property measurement values 



Many HTML properties use measurement 
values. We tell you which measurement values 
go with which properties throughout this book. 
Standard property measurements dictate the 
size of a property in two ways. 

Absolute value measurements can dictate a spe- 
cific length or height with one of these values: 

inches, such as . 5i n 

V centimeters, such as 3cm 

V millimeters, such as 4mm 
i"* picas, such as lpc 

There are about six picas in an inch. 

points, such as 16pt 

There are 12 points in a pica. 

pixels, such as 13px (these match up to 
individual dots on your computer display). 

Relative value measurements base length or 
height on a parent e/emenf value in the document: 



p%: A percentage of the current font- 
si ze value, such as 150% 

For example, you can define a font size of 
80% for all paragraphs. If your document 
body is defined with a 15-point font, the font 
size of the paragraphs is 12 points (80 per- 
cent of 15). 

ex: A value that is relative to the x-height of 
the current font. An x-height is the equiva- 
lent of the height of the lowercase charac- 
ter of a font, such as 1 . 5ex 

*<" em: A value that is relative to the current 
font size, such as 2em 

Both lem and 100% equal the current size. 

Be careful when using these values because 
some properties allow only some of the mea- 
surement values, such as length values but not 
relative values. Don't let the jargon scare you. 
Just define the size in a value you're familiar with. 
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Entire books and Web sites are devoted to the fine details of using each and 
every property in these categories. We suggest one of these references: 



oks 




ading Style Sheets For Dummies by Damon A. Dean, published by 
Wiley Publishing. 

**" Westciv's CSS2 reference on the Web: 

www.westci v .com/styl e_naster/acadeny/css_tutorial /index. html 

Although CSS syntax is straightforward, combining CSS styles with markup to 
fine-tune your page layout can be a little complicated. But to become a CSS 
guru, you just need to 



i>* Know the details of how the different properties work. 
Experiment with how browsers handle CSS. 

Practice shows you the right way to convey your message on the Web 
with CSS. 



CSS Structure and Syntax 

A style sheet is made of style rules. Each style rule has two parts: 

IV 0 Selector: Specifies the markup element to which the style rules apply, 
f" Declaration: Specifies how the content described by the markup looks. 

You use a set of punctuation marks and special characters to define a style 
rule. The syntax for a style rule always follows this pattern: 

selector [declaration] 

A declaration breaks down further into two items: 

V Properties are aspects of how the computer displays text and graphics 
(for example, font size or background color). 

Values are the data that specify how you want text and images to look 
on your page (for example, a 24-point font size or a yellow background). 

You separate the property from the value in a declaration with a colon: 

selector [property: value] 
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For example, these three style rules set the colors for first-, second-, and 
third-level headings: 



teal ) 
maroon I 
h3 {color: black) 



The CSS specification lists exactly which properties you can work with in 
your style rules and the different values that they can take. Most are pretty 
self-explanatory (col or and border, for example). See "What you can do 
with CSS," earlier in this chapter, for a quick rundown of what properties the 
CSS2 specification includes. 

Style sheets override a browser's internal display rules; your formatting spec- 
ifications affect the final appearance of the page in the user's browser. This 
means you can better control how your content looks and create a more con- 
sistent and appropriate experience for visitors 

For example, the following style rules specify the font sizes (in pixels) for 
first-, second-, and third-level headings: 



hi (font-size: 24px) 
h.2 (font-size: 18pxl 
h3 (font-size: 1 6 px I 



Figure 8-1 shows a simple HTML page with all three heading levels (plus some 
body text) without the style sheet applied. The browser uses its default set- 
tings to display the headings in different font sizes. 



Figure 8-1: 

An HTML 

page 
without 
style speci- 
fications. 
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Searching for the Perfect Remote Control 
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it's always there in your living room, squatting malevolently on the coffee table. 
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Fourteen remote controls. 

If the above story sounds familiar, it's time to consider a programmable remote control. It may sound absurd to 
think about buying yet another remote control, when you already have fourteen perfectly usable ones. But v 
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Figure 8-2 shows the same Web page with a style sheet applied. The headings 
are significantly smaller than in the preceding figure. That's because the style 
^s override the browser's settings. 



Figure 8-2: 
An HTML 

page with 
style speci- 
fications 
in effect. 
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Users can change their preferences so their browsers ignore your style 
sheets. (Most users will use your sheets) Test your Web page with style 
sheets turned off to be sure it looks good (or acceptable) without your 
style sheets. 

Selectors and declarations 

You probably want a style rule to affect the display of more than one prop- 
erty for any given selector. You can create several style rules for a single 
selector, each with one declaration, like this: 

hi {color: teal ) 

hi (font-family: Arial ) 

hi (font-size: 36px) 

However, such a large collection of style rules becomes hard to manage. CSS 
lets you combine several declarations in a single style rule that affects the 
display characteristics of a single selector, like this: 

hi (color: teal ; 

font-family: Arial ; 
font-size: 36px) 
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Font family 



lues to the font-family 
property, you can provide a list of comma- 
separated font names. These names must 
match fonts available to the user's Web 
browser. If a font name, such as "Times New 
Roman," includes spaces, it must be enclosed 
in quotation marks. 



hi 



font-family: 
Roman" , 



Verdana ; 
serif; ) 



"times New 



The browser seeks to use Verdana first, and if 
it's not available, it looks for Times New Roman 
next, and then uses a generic serif font as its 
last option. Chapter 10 covers fonts in CSS. 




All the declarations for the h 1 selector are within the same set of brackets 
({ )) and are separated by a semicolon (;). You can put as many declarations 
as you want in a style rule; just end each declaration with a semicolon. 

The semicolon at the end of the last declaration is optional. Some people 
include it to be consistent and end every declaration with a semicolon, but 
it's not necessary. We use it both ways throughout this book. 

From a purely technical standpoint, white space is irrelevant in style sheets 
Oust as it is in HTML), but you should use a consistent spacing scheme so 
that you can easily read and edit your style sheets. An exception to this 
white-space rule is when you declare multiple font names in the font-family 
declaration. See the "Font family" sidebar for more information. 

You can make the same set of declarations apply to a collection of selectors, 
too: You just separate the selectors with commas. The following style rule 
applies the declarations for text color, font family, and font size to the hi, h2, 
and h3 selectors: 




hi, h2, h3 (color: teal ; 

font-family: Arial ; 

font-size: 36px) 

The sample style rules in this section show that style sheet syntax relies 
heavily on punctuation. When a style rule doesn't work exactly as you antici- 
pate, make sure your syntax doesn't use a semicolon where you need a colon, 
and doesn't use a parenthesis where you need a bracket 



The W3C's validation service can help you find problems in your style sheets: 



http://jigsaw.w3.org/css-val i da tor/ 
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Working u/ith style classes 



.es you need style rules that apply only to specific instances of an 
arkup element. For example, if you want a style rule that applies only 
to paragraphs that hold copyright information, you need a way to tell the 
browser that the rule has a limited scope. 

To target a style rule more closely, combine the class attribute with a 
markup element. The following examples show HTML for two kinds of 
paragraphs: 

v 0 A regular paragraph (without a c 1 a s s attribute) 

< p > T hi s is a regular paragraph . </p> 
i>* A cl ass attribute with the value of copy ri ght 

<p class="copyright">fhis is a paragraph of class copyright. </p> 

To create a style rule that applies only to the copyright paragraph, follow the 
paragraph selector in the style rule with 

If A period (.) 
The value of the class attribute, such as copyright 

The resulting rule looks like this: 

p. copyright {font-family: Arial; 

font-size: 12px; 
color: white; 
background: black) 

This style rule specifies that all paragraphs of class copyri ght display 
white text on a black background in 12-pixel Arial font. Figure 8-3 shows 
how a browser applies this style rule only to paragraphs with the copyri ght 
attribute. 



Figure 8-3: 
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You can also create style-rule classes that aren't associated with any element, 
like the following example: 



font-family: Arial 
font-size: 14px; 
background: black; 
color: white) 



You can use this style class with any element by adding c 1 a s s = " w a r n i n g " to 
that element. Figure 8-4 shows how a browser applies the warning style to the 
paragraph and heading, but not the block quote, in this HTML: 

<p class="warning">This is a paragraph without the warning class applied. </p> 
<blockquote>This is a block quote without a defined class. </bl ockquote) 
<p cl ass="warni n g " > T h i s is a paragraph with the warning class applied. </p> 



Figure 8-4: 

You can use 
classes to 
create style 
rules that 
work with 
any 
element. 
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Inheriting styles 

One of the basic concepts in HTML (and markup in general) is nesting tags: 

i>* Your entire HTML document is nested within <html > and </html > tags. 

Everything a browser displays in a window is nested within <body > and 
</body> tags. (That's just the beginning, really.) 

The CSS specification recognizes that you often nest one element inside 
another and wants to be sure that styles associated with the parent element 
find their way to the child element. This mechanism is called inheritance. 
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When you assign a style to an element, the same style is applied to all the ele- 
ments nested inside the element. For example, a style rule for the body ele- 
t sets the page background, text color, font size, font family, and 
looks like this: 



body {background: black; 
color: white; 
font-size: 18px; 




font-family: Garamond; 
margin-left: 72px; 
margin-right: 72px; 
margin-top: 72px ) 

If you want to set style rules for the entire document, set them in the body 
element. Changing the font for the entire page, for example, is much easier to 
do that way; it beats changing every single element one at a time. 

When you link the following HTML to the preceding style rule, which applies 
only to the body element, the formatting is inherited to all elements (as 
shown in Figure 8-5): 



<body> 

<p>This paragraph inherits the page styles. </p> 

<h 1 > As does this heading</hl> 

<ul> 

<li>As do the items in this list</li> 
<li>Item</li> 
<li>Item</li> 
</ul> 
</body> 



Figure 8-5: 

Inheritance 
means style 

rules apply 
to nested 
elements. 
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This paragraph inherits the page s tries. 






As does this heading 






• As do the items in this list 

• Item 

• Item 
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aying attention to inheritance 



When you build complex style sheets that guide 
the appearance of every aspect of a page, keep 
inheritance in mind. For instance, if you set mar- 
gins forthe page in a body style rule, all margins 
you set for every other element on the page are 
based on margins set for the body. If you know 
how your style rules work tog ether, you can use 
inheritance to minimize style rule repetition and 
create a cohesive display for your page. 



This chapter covers basic CSS syntax, but you 
can fine-tune your style rules with advanced 
techniques. A complete overview of CSS syntax 
rules is available in the "CSS Structure and 
Rules" tutorial by the Web Design Group at 
www .html help. com /re ference/css/st 
ructure . html . 



Usinq Different Kinds of Style Sheets 

When you finish creating your style rules, you're ready to connect them to 
your HTML page with one of these options: 

i>* Insert style information into your document. You can either 

• Use the <sty 1 e> element to build a style sheet into a Web page. 
This is an internal style sheet. 

• Use the sty 1 e attribute to add style information directly to a tag. 
This is an inline style. 

Use an external style sheet. You can either 

• Use the <1 i n k> tag to link your Web page to an external style 
sheet. 

• Use the CSS @i mport statement to import an external style sheet 
into the Web page. 



Internal style sheets 

An internal style sheet lives within your HTML page. Just add style rules in a 
<sty 1 e> element in the document's header. You can include as many (or as 
few) style rules as you want in an internal style sheet. (See Listing 8-1.) 
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Listing 8-1 : Adding an Internal Style Sheet to an HTML Document 



1-^ <■ DOCTYPi 

3 Books 



E html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 
"http://www.w3 . org/TR/xhtml 1/ DTD/xhtml 1 -transi ti onal .dtd"> 
ns="http: //www. w3.org/1999/xhtml "> 



<head> 

<title>Internal Style Sheet Exampl e</ti tl e> 
<style type="text/css"> 
body (background: black; 

color: white; 

font-size: 16px; 

font-family: Garamond; 

margin-left: 72px; 

margin-right: 72px; 

margin-top: 72px} 

hi, h2, h3 {color: teal ; 

font-family: Arial ; 
font-size: 36px} 

p. copyright {font-family: Arial; 

font-size: 12px; 
font-color: white; 
background: black} 

warning {font-family: Arial; 
font-size: 16px; 
font-color: red} 

</style> 

</head> 
<body> 

<!-- Document content goes here --> 

</body> 
</html> 



^yp ^ The benefit of an internal style sheet is convenience: Your style rules are 

on the same page as your markup so you can tweak both quickly. But if you 
want the same style rules to control the appearance of more than one HTML 
page, move those styles from individual Web pages to an external style sheet. 



External style sheets 

An external style sheet holds all your style rules in a separate text document 
you can reference from any HTML file on your site. You must maintain a sepa- 
rate style sheet file, but an external style sheet offers benefits for overall site 
maintenance. If your site's pages use the same style sheet, you can change 
any formatting characteristic on all pages with a change to the style sheet. 
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mend using external style sheets on your sites. 



To reference an external style sheet, use the link element in the Web page 
header, like this: 



<html> 






<head> 

<ti tl e>External Style Sheet Exampl e</ti tl e> 

< 1 ink rel="stylesheet" type="text/css" href="styles.css" /> 

<head> 
<body> 




<!-- Document content goes here --> 






</body> 
</html> 






The href attribute in the <1 i nk> element cai 


1 take either 




A relative link (a style sheet on your owi 


i site) 




An absolute link (a style sheet that doesn't reside on your own site) 


Usually, you shouldn't use a style sheet that doesn't reside on your Web 
site — you want control of your site's look and feel. 


If you want to quickly add style to your Web page (or experiment to see 
how browsers handle different styles), use an absolute URL to point to 
one of the W3C's Core style sheets. Read more about them at 


www.w3.org/Styl eSheets/Core/ 



Chapter 6 covers the difference between relative and absolute links. 



Importing 

The @i mport statement instructs the browser to load an external style sheet 
and use its styles. You use it within the <styl e> element but before any of 
the individual style rules, like so: 

<style> 

@i mport "http: //www. somes i te .edu/stylesheet.css"; 
</style> 

Style rules in an imported style sheet take precedence over any rules that 
come before the @i mport statement. So if you have multiple external style 
sheets referenced with more than one @i mport on your page, rules apply 
from the later style sheets (the ones farther down on the page). 



6K^ 

Linking 
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Use inline styles carefully 



'idual style rules, called an 
inline style, to individual elements in an HTML 
document. An inline style rule attached to an 
element looks like this: 

<p style="color: green">Green text.</p> 

Adding style rules to an element isn't really the 
best approach. We generally recommend that 
you choose either internal or (preferably) exter- 
nal style sheets for your rules instead of attach- 
ing the rules to individual elements in your 
document. Here are a few reasons: 



Your style rules get mixed up in the page 
and are hard to find. 

You must place the entire rule in the value 
of the styl e attribute, which makes com- 
plex rules hard to write and edit. 

You lose all the benefits that come with 
grouping selectors and reusing style rules 
in external style sheets. 



Understanding the Cascade 

Multiple style sheets can affect page elements and build upon one another. 
It's like inheriting styles within a Web page. This is the cascading part of CSS. 

Here's a real-world example: a Web site for university's English department. 
The English department is part of the School of Humanities, which is just one 
school in the overall university. Each of these entities — the university, the 
school, and the English department — has its own style sheet. 

1. The university's style sheet provides style rules for all of the pages in 
the overall site. 

2. The school's style sheet links to the university's style sheet (using an 
©import statement), and adds more style rules specific to the look the 
school wants for its own site. 

3. The English department's style sheet links to the school's style sheet. 

So the department's pages both have their own style rules and inherit the 
style rules from both the school and the university's style sheet. 

But what if multiple style sheets define rules for the same element? What if, 
for example, all three style sheets specify a rule for the h 1 element? In that 
case, the nearest rule to the page or element you're working on wins out: 

v 0 If an h 1 rule exists on the department's style sheet, it takes precedence 
over the school and university hi styles. 



v 0 If an individual page within the department applies a style rule to h 1 in a 
<styl e> tag, that rule applies. 
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In This Chapter 

Understanding how CSS is used 
Positioning objects on a page 
Creating font rules 
Creating style sheets for print 
Understanding aural style sheets 



m M nderstanding the structure and syntax of CSS is easy Learning about 
\f\ the properties that CSS can apply to (X)HTML documents takes a little 
more time and effort. However, where the learning curve really gets interest- 
ing is when it comes to learning how to use CSS to take a plain or ordinary 
Web page and "kick it up a notch." This chapter deals with how to put CSS to 
work, rather than focusing on its structure and inner workings. 

Chapter 8 is a high-level overview of CSS and how it works. If you need a 
refresher of CSS style rules and properties, read Chapter 8, and then return to 
this chapter and put CSS in action. 



Now it's time to make a page and give it some style! 
To use CSS efficiently, follow these general guidelines: 



When you test how a page looks, use internal styles so you can tweak to 
your heart's delight. (This chapter shows internal style sheets.) 

When your test page looks just right, move those styles to an external 
sheet, and then apply them throughout your site. 
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i Layout, Positioning, and 
ce 

You can use CSS to lay out your pages so that images and blocks of text 

Appear exactly where you want them to 
V Fit exactly within the amount of space that you want them to occupy 

After you create the styles within a document, you can create an external 
style sheet that applies the same styles to any page you want. 

betieiopinq specific styles 

Listing 9-1 shows a Web page without any defined styles. 



Listing 9-1 : A Fairly Dull Page 



<! DOCTYPE html PUBLIC "-//W3C//DTD 


XHTML 1.0 Transitional//EN" 


"http://www.w3 . org/TR/xhtml 1/ DTD/xhtml 1-transitional . d t d " > 


<html xmlns="http://www. w3.org/1999/xhtml "> 


<head> 






<title>Pixel 's Page</title> 






<meta http-equi v=" Content -Type" 


i 


:ontent="text/html ; cha rs et= I SO - 8859 - 1 " /> 


</head> 






<body> 






<hl>I'm Pixel the Cat. Welcome 


to my page.</hl> 


<div cl ass="navbar"> 






Links of interest:<br /> 






<a href="http: //www. google. 


com/">Google</a><br /> 


<a href="http://www.amazon. 


com/">Amazon</a><br /> 


<a href ="http: //www. yahoo. com/" >Yahoo</a> 


</div> 






<img src="/images/pixell.jpg" a 


lt="The Cat" width="320" hei ght=" 240 " 


id="theCat" /> 






</body> 






</html> 







The cat looks great, but the page certainly doesn't show off his possibilities. 
The addition of some styles improves the page immensely. Here's how! 



Visual layouts 

Instead of the links appearing above the image, as they are in Figure 9-1, we 
want them on the left, a typical location for navigation tools. The following 
markup floats the text for the search site links to the left of the image: 



ManaqinCj 
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.navbai 

ipBooks 

bordi 



<style type="text/css"> 
navbar { 

ground-color: #CCC; 
er-bottom: #999; 
er-left: #999; 
border-width: 0 0 thin thin; 
border-style: none none groove groove; 
display: block; 
float: left; 
margin: 0 0 0 lOpx; 
padding: 0 lOpx 0 lOpx; 
width: 190px; 

) 

</style> 



3 Pixel's Page - Microsoft Internet Explor 
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Figure 9-1: 

This 
styleless 
page 
doesn't live 
up to this 
cat's 
possibilities. 
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I'm Pixel the Cat. Welcome to my page. 



Links of interest 

Google 
Amazon 
Yahoo 




____ 



In the preceding rules, we 

Added a <styl e> tag 

i>* Defined the navbar class inside the < s ty 1 e > tag 

f Used the navbar class to instruct the content to float to the left of 
images, which causes them to appear in the same part of the page on 
the left, rather than above the graphic 

This rule says that anything on the page with a class of navba r (as shown in 
Figure 9-2) should display with 

A light-gray background 
I A bottom and left thin grooved-line border in a darker gray 
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No top or right border 

A tilock that floats to the left (so the everything else on the page moves 
't, as with the image of the cat in Figure 9-2) 



left margin of 10 pixels 
Padding at top and bottom of 10 pixels each 
u* A navbar area 190 total pixels wide 
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Figure 9-2: 

The 
navigation 
bar now 
looks more 
like the 
standard 
left-hand 
navigation. 



I'm Pixel the Cat. Welcome to my page. 



Links of interest 

Google 
Amazon 
Yahoo 





Note that several of the properties in the declaration, called shorthand proper- 
ties, take multiple values, such as margi n and paddi ng. (They are known as 
shorthand properties because they collect values from multiple related CSS 
properties [like margin-height, margi n-wi dth, and so forth]. See Appendix 
B for a complete list.) Those values correspond to settings for the top, right, 
bottom, and left edges of the navbar's box. margi n creates an empty zone 
around the box, and padding defines the space between the edges or bor- 
ders of the box and the content within the box. Here are the rules that 
explain how to associate values with properties that deal with margins, bor- 
ders, padding, and so forth: 

V If all the sides have the same value, a single value works. 

V If any side is different from the others, every side needs a separate value. 

To remember what's what, think of the edges of an element box in clockwise 
order, starting with the top edge: top, ri ght, bottom, and then 1 eft. 
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Positioning 

CS§> provides several ways to specify exactly where on a page an element 

jpear. These controls use various kinds of positioning based on the 
iffcfcrfhips between an element's box and its parent element's box to help 
page designers put page elements where they want them to go. The kinds of 
properties involved are discussed in the following sections. 




Location 

You can control the horizontal and vertical location of an image. Instead of 
just being drawn automatically to the right of the navigation bar, you can put 
it down and to the left, as shown in Figure 9-3: 

#theCat {position: absolute; top: lOOpx; left: lOOpx ; ) 




You might be wondering why the n a v ba r rule starts with a period, and the 
theCat rule starts with a pound symbol (also known as a hash mark or 
octothorpe). That's because the period applies to a cl ass attribute, but the 
pound symbol applies to an i d attribute. You could apply either a c 1 a s s or 
an id; the difference between the two is that a cl ass can be used more than 
once, but an i d must be unique for a page. You can't have anything else on 
the page with an id of theCat. The difference, quite simply, is that a cl ass 
lets you refer to some entire kind of element with a single reference, but an 
i d can address only a single instance of an element. 
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Figure 9-3: 

The image is 
much more 
striking 
in this 
location. 



I'm Pixel the Cat. Welcome to my page. 
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p objects can be assigned to the same position in a Web page. When that 
the browser must decide the display order and which objects to 
which ones to hide. 



The z- i ndex, added to any rule, tells CSS how you want an object stacked 
over and under other objects the page knows about: 

Lower numbers move down the stack. 

V Higher numbers move up the stack. 

V The default value for z-i ndex is auto, which means it's the same as for 
its parent element. 

Giving theCat a z-i ndex value of -1 automatically puts it behind everything 
else on the page (as shown in Figure 9-4) for which the z - i ndex isn't set. 
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I'm Pixel the Cat. Welcome to my page. 



Links of interest 






Google 
Amazon 
Yahoo 









Figure 9-4: 

The cat's 
peeking out 
from behind 

the navi- 
gation bar. 
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Fonts 

You can make a page more interesting by replacing old boring default fonts. 
Start by specifying a generic body font as well as setting some other default 
rules such as background color and text color. 

Body text 

Here's an example that sets the style for text within the body tag: 



body (font-family: verdana, geneva, arial, helvetica, sans-serif; 
font-size: 12px ; line-height: 16px; background-color: white; 
color: black;) 
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V The 



Because the body element holds all content for any Web page, this affects 
everything on the page. The preceding rule instructs the browser to show all 
appears within the body element as follows: 



text is rendered using one of the fonts listed. We placed Verdana 
at the head of the list because it is the preferred choice, and browsers 
check for available fonts in the order listed in the markup. (Note that a 
generic font, in this case sans-serif, almost always appears last in 
such lists because the browser can almost always supply such a font 
itself.) 

You can list more than one font. The browser uses the first font in your 
list that's available in the browser. For example, the browser looks for 
fonts from our list in this order: 

1. Verdana 

2. Geneva 

3. Arial 

4. Helvetica 

5. The browser's default sans-serif font 
*<" 12-pixel font size 

16-pixel line height 

The lines are spaced as though the fonts are 16 pixels high, so there's 
more vertical space between lines. 



Figure 9-5 shows that 



All the changes apply to the entire page, including the navigation bar. 

The font-family changed in the h 1 heading, but neither the f o n t - 
size nor 1 ine-height was changed. 

Because headers have specific defaults for font si ze and 1 i ne- 
hei ght, another rule is needed to modify them. 

In Figure 9-5, the figure shows that the top of the header is slightly truncated. 
This is a bug in Internet Explorer for Windows that doesn't occur in other 
browsers. Unfortunately, CSS rendering is unpredictable enough that you 
must test style rules in various browsers to see how they look and then 
tweak accordingly. 

Headings 

If we explicitly assign style properties to the h 1 element, display results are 
more predictable. Here's a sample set of styles: 



hi {font-family: "trebuchet ms", verdana, geneva, arial, helvetica, sans-serif; 
font-size: 24px; line-height: 26px ; ) 
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Figure 9-5: 

The fonts 
are nicer, 
but they 
could still 
use a little 
more work. 
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ixel the Cat. Welcome to my page. 



Links of interest: 

Google 
Amazon 
Yahoo 



Doi-e 




Figure 9-6 shows a first-level heading using the font family and type size that 
we want: 24-pixel Trebuchet MS, with a 26-pixel line height. If we didn't have 
the Trebuchet MS font on our system, the heading would appear in Verdana. 

When a font name includes spaces (like trebuchet ms or times new 
roman), the full name must be within quotation marks. See Chapter 8 for 
more information. 



Figure 9-6: 

Declaring a 
rule for hi 
makes it 
appear just 
how we 
want it. 
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Hyperlinks 

think that having the hyperlinks underlined makes the menu look a little 
so underlines are normally off. But we still want the hyperlinks to 
hyperlinks, so we tell CSS 



Make links bold. 
i>* Make underlines appear when the cursor is over a link. 
Show links in certain colors. 

The following style rules define how a browser should display hyperlinks: 



a 


{text-decoration: none; 


font-weight: bold) 


a 


link (color: blue) 




a 


visited (color: #930 




a 


hover (text-decoration: 


underl i ne ) 



What's going on here? Starting from the top, we're setting two rules for the 
<a > tag that apply to all links on the page: 



V The text decorati on declaration sets its value to none. 

This gets rid of the underlining for all the links, 
f The f ontwei ght declaration has a value of bol d. 

This makes all the links on the page appear in bold. 



The remaining rules in the preceding code are pseudo class selectors. Their 
most common usage is to modify how links appear in their different states. 
For more information on pseudo classes, see Chapter 10. Figure 9-7 shows 
how the page appears when the previous style rules are applied. 
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Figure 9-7: 

The final 
version of 
our page. 
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Externalizing style sheets 



1£ final page is the way you want it, you're ready to move the tested, 
!a internal style sheet into an external style sheet. 




Every page of the site can use the whole style sheet with the addition of 
only one line of code to each page. 

v* Changes can be made site-wide with one change in the external style 
sheet. 



To create an external style sheet from a well-testing internal style sheet, 
follow these steps: 

1. Copy all text that sits between the <styl e> and </styl e> tags. 

2. Paste that text into its own document. 

This text should include only CSS markup, without any HTML tags or 
markup. 

3. Add a . ess suffix to the document's name (for example, myStyl es . ess). 
This shows at a glance that it's a CSS file. 

Here are two methods for linking an HTML file to an external style sheet: 



i^Usethe<link>tag. 

All CSS-capable browsers understand the link tag. 
f* Use the <styl e> tag with the ©import keyword. 

Only newer browsers understand the <styl e> and ©import combination. 



Style sheets for old and new browsers 



To include rulesthat both old and new browsers 
can handle, you can create two style sheets for 
a site: 

A basic style sheet that contains only the 
simplest of styles 

A complex style sheet that uses the capa- 
bilities of the most powerful new browsers 

The following code uses two style sheets: 

A <1 i nk> tag brings in simpl eStyl es . 
ess, a basic style sheet for old browsers. 



The <styl e> tag and ©import keyword 
combination brings in compl exSty 1 es . 
ess, a complex style sheet for new 
browsers, which overrides the styles in 

si mpl eStyl es . ess. 

<link href =" s i mpl eSty 1 es . ess " 
rel="styl esheet" /> 
<style type="text/css"> 

©import "complexStyles.css" ; 
</style> 

Both old and new browsers get exactly those 
rules that they can handle. 
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See Chapter 8 for more on these two methods. 




You can specify how you want your Web pages to look or behave on different 
media types depending on the medium. 

Table 9-1 lists all the media types and their uses. 



Table 9-1 Recognized Media Types 



Media Type 


Description 








all 


Suitable for all devices 






aura 1 


For speech synthesizers 






brai 1 1 e 


For Braille tactile feedback di 


jvices 




embossed 


For paged Braille printers 






handheld 


For handheld devices (such as those with a small sci 


"een, 




monochrome monitor, and limited bandwidth) 




print 


For paged, opaque material and for documents viewed on- 
screen but in print preview mode 


projecti on 


For projected presentations such as projectors or transparencies 


screen 


For color computer screens 







tty For media using a fixed-pitch character grid, such as teletypes, 

terminals, or portable devices with limited display capabilities 



tv For television-type devices (such as those with low resolution, 

color capability, limited-scrollability screens, and some sound 
available) 



CSS can make changes to customize how the same pages 

V Render on a computer screen 

V Print on paper 

A nifty color background might make your page a mess when it's printed 
on a black-and-white laser printer, but proper use of print media styles 
can keep this from happening! 

V Sound when read out loud 




Part III: Taking Precise Control Over Web Pages 



Visual media styles 



lists the CSS properties that you're most likely to use in a typical 
The Cheat Sheet at the front of this book includes brief descrip- 
tions of the most commonly used CSS properties and (X)HTML tags and 
attributes. 



Table 9-2 Visual Media Styles 



riuutsf ty 


Values 






fiofstiiit XfstlliO 
UEIctull Value 


Description 


background- 
col or 


Any color, by 
name or hex 
code 




transparent 


Background color of 
the page 


background- 
image 


URL 






none 


URL of an i 
display in ; 
backgroun 


mage to 
i page 
d 


col or 


Any color, by 
name or hex 
code 




UA dependent 


Color of the fore- 
ground text 


f ont-f ami ly 


Any named font 

cursive 
fantasy 
monospace 
sans-serif 
seri f 


UA dependent 


Font to display 


font-si ze 


number + unit 

xx-sma 1 1 
x-smal 1 
smal 1 
medi urn 


medi urn 


Size of the font to be 
displayed 




1 a rge 
x-1 arge 
xx-1 arge 












f ont-wei ght 


normal 
bold 
bol der 






normal 


Weight (how bold or 
light) the font should 
appear 



1 i ghter 



line-height normal normal 
number + unit 



Vertical spacing 
between lines of text 
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Property 


Values 


Default Value 


Description 




1 eft 


UA dependent + 


Which way the text 




ri ght 


writing direction 


on the page should 




center 




he aligned 




justify 







text-decoration none none Special text effects 

underl i ne 
overl i ne 
1 i ne-through 
blink 



1 i st- sty 1 e- 
image 


URL 


none 


URL of an image to 
display as the bullets 
for a list 


1 i st-styl e- 


i nsi de 


outsi de 


Wrapping 


list text 


posi ti on 


outsi de 




inside or outside of 








bullets 





list-style- disc disc Bullet type on lists 

type circle 
square 
decimal 
decimal - 
leading-zero 
1 ower-al pha 
upper-al pha 
none 



display block inline Formatof a defined 

inline section of the page 

none 

top percentage auto For absolutely posi- 

number+unit tioned objects, the 

auto offset from the top 

edge of the position- 
ing context 



right percentage auto For absolutely posi- 

number + unit tioned objects, the 

auto offset from the right 

edge of the position- 
ing context 



(continued) 
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bottom 



left 



posi ti on 



v i s i b i 1 i ty 



Values 



Default Value Description 



percentage 
number + unit 

auto 



auto 



percentage 
number + unit 

auto 



auto 



col 1 apse 
visible 
hi dden 
inherit 



For absolutely posi- 
tioned objects, the 
offset from the 
bottom edge of the 
positioning context 



For absolutely posi- 
tioned objects, the 
offset from the left 
edge of the position- 
ing context 



static static Method by which an 

absolute element box is laid 

relative out, relative to posi- 

fixed tioning context 



inherit Indicates whether an 

object will be dis- 
played on the page 



z-i ndex 


number 


a uto 


Stacking order of an 




auto 




object 




border-sty! e 


none 


not defined 


The displayed style 




dotted 




of an object's borders 




dashed 




Can be broken out 




solid 




into border-top- 




doubl e 




styl e, border- 




groove 




ri ght-styl e. 




ri dge 




border-bottom- 




i nset 




styl e, and 




outset 




border-1 eft- 








styl e 




border-wi dth 


Thi n 


not defined 


Width of the border 




medi um 




around an object 




thick 




Can be broken out 




number 




into border-top- 








wi dth, border- 








ri ght-wi dth. 








border-bottom- 








wi dth, and 








border-1 eft- 








wi dth 
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Values 
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border 



margi n 



Default Value Description 



r-color Any color, by notdefined 
name or hex code 

transparent 



border-width + notdefined 



number + unit 

auto 



percentage 
number + unit 

auto 



notdefined 



Color of an object's 
border 

Can be broken out 
into border-top- 
col or, border- 
ri ght-col or, 
border-bottom- 
col or, and 
border-! eft- 
col or 



Combined features of 



border-style + 
border-color 


a border around an 
object 

Can be broken out 
into border-top, 
border-ri ght, 
border-bottom, 
and border-1 eft 


float 


left 
ri ght 




none 


Specifies whether 
the object should be 




none 




floated to one side of 
the document 


height 


percentage 
number + unit 

auto 


a uto 


Displayed height of 
an object 


wi dth 


percentage 




a uto 


Displayed width of an 



object 



Displayed margins of 

an object 

Can be broken out 

into margi n -top, 

margin-right, 

ma rgi n -bottom, 

and margi n-1 eft 



(continued) 
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pBoo^ 

padcn ng 



Values 



Default Value Description 




percentage 
number + unit 

auto 



not defined 



Displayed blank 
space around an 
object 

Can be broken out 
into paddi ng-top, 
padding-right, 
paddi ng-bottom, 
and paddi ng- 1 eft 



cursor 



auto 

crossha i r 
def aul t 
poi nter 
move 
text 
hel p 



a uto 



Cursor appearance 
in the browser 
window 



Some browsers don't support all CSS properties. If you're using CSS features, 
test your pages with the browsers that you expect your visitors will use. 

If you want to take an extremely thorough guide to CSS everywhere you go, 
you can put it on your iPod! Westciv's free podGuide is a folder of small text 
files. Download the zipped file and follow the instructions on how to install it, 
and you have complete documentation with you at all times. You also win the 
title of "World's Biggest CSS Geek." The podGuide is at 

www. wes tci v. com/ news /podguide. html 




Payed media styles 



CSS can customize how a page looks when it's printed. We recommend these 
guidelines: 

f* Replace sans-serif fonts with serif fonts. 

Serif fonts are easier to read in print than sans-serif fonts. 
i>* Insert advertisements that 

• Make sense when they aren't animated 

• Are useful without clicking 
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In general, paged media styles help ensure that text looks as good when it's 
printed as it does in a Web browser. See Table 9-3 for an explanation of paged 
;operties in CSS that you can use to help your users make the most 
ting Web pages. 



Table 9-3 




Paged Media Styles 


Property 


Values 


Default Value Description 



orphans number 2 The minimum number 



of lines in a para- 
graph that must be 
left at the bottom of 



a page 




page-break- 
after 


auto 
al ways 
avoid 
left 
ri ght 


a uto 


The page-breaking 
behavior after an 
element 


page-break- 
before 


auto 
al ways 
avoid 


auto 


The page-breaking 
behavior before an 
element 




left 
ri ght 








page-break- 
i nsi de 


auto 
avoid 


auto 


The page-breaking 
behavior inside an 
element 


wi dows 


number 


2 


The minimum number 



of lines in a para- 
graph that must be 
left at the top of a 
page 



The example in Listing 9-2 uses these options for paged media styles: 

u* Make the output black text on a white background. 
Replace sans-serif fonts with serif fonts. 
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Listing 9-2: Adding a Print Style Sheet 



1-^ <■ DOCTYPi 

:>Bocte 



DOCTXPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 
//www. w3.org/TR/xhtml 1/ DTD/xhtml 1-transi ti onal . dtd " > 
ns="http: //www. w3.org/1999/xhtml "> 

<head> 

<title>This is my page</title> 

<meta http-equi v="Content-Type" content="text/html ; charset=IS0-8859-l" /> 
<style> 

body {background-color: black; color: white; Tont-family: sans-serif;) 
©media print I 

body {background-color: white; color: black; font-family: serif) 

) 

</style> 

</head> 

<body> 

This page will look very different when sent to the printer. 

</body> 
</html> 

If you're now wondering why none of the properties in Table 9-3 were set, but 
other properties were, it's because (in this example) their defaults worked 
fine. And just because those page properties can be set doesn't mean that 
you can't set other properties also — it isn't an either/or. 



Aural (speech sound) styles 



Aural browsers and styles aren't just for the 
visually impaired. They're also useful for Web 
users who 

Have reading problems 

Need information while driving 

The following example recommends voices to 
be played using male and female characters to 
make it clear which characters are speaking: 

<style> 

@media aural { 

p. Stanley (voice-family: male;) 
p. stella {voice-family: female;) 



</style> 

Usually, you don't have to worry much about 
adding aural styles to your page. The default 
readers should work just fine if 

V Your page is mostly text. 

V* You don't have a strong opinion about how 
it sounds, so that any clearly male orfemale 
voice will do. 

That said, you can find a complete listing of all 
aural style properties in Appendix B at the end 
of this book. 
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lists other CSS properties that you might find in documents. 



Table 9-4 



Additional CSS Properties 



Property 



Values 



Default Value 



Description 



©page 



Paged (page selector| 

media page-pseudo- 
class | page 
context ) 



Defines page context 
forgiven content box 



content 


Text 


1 string uri 
counter attr(x) 
open-quote 
cl ose-quote 
no-open-quote 
no-cl ose-quote 
inherit) 


Describes content to 
be inserted during 
generated content 
operation 


counter- 
i ncrement 


General 


{name : i nteger 
none i nheri t ) 


Used to increment 
the value of a named 
counter 




counter- 


General 


{name : 


Used to reset the 


reset 




i nteger 


value of a named 






none i nheri t ) 


counter to 


a specific 








value 





empty-cells Table {hide|show| Describes whatto do 

inherit) with cells that con- 

tain no content 



margi n- 


Box 


{auto 1 ength 


Sets margin width for 


bottom 




percentage 
inherit) 


bottom of element 


margi n- 
left 


Box 


{ auto 1 ength | 

percentage 

inherit) 


Sets margin width for 
left of element 


margi n - 
right 


Box 


{auto 1 ength | 

percentage 

inherit) 


Sets margin width for 
right of element 


margi n-top 


Box 


{auto 1 ength | 

percentage 

inherit) 


Sets margin width for 
top of element 
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Table 9-4 (continued) 




Values 


Default Value 


Description 


marTer- 


Box 


{ auto 1 ength | 


Sets offset between 


of f set 




inherit) 


marker edge and 








nearest edge of prin- 








cipal containing box 



marks 



Paged |crop|cross| 
media none I i nheri t ) 



Defines what kind of 
page edge, crop, or 
trim marks to include 
when rendering 
pages for output 



overflow General I auto | hi dden | Determines handling 

scroll |visible| of content that over- 
i nheri t) flows element con- 

tent area 



page Paged (page selector | Invokes a page 

media inherit) selector defined by 

using ©page 



paddi ng- 




Box 


1 1 ength 




Sets width of 


bottom 






percentage 


padding on element's 








inherit) 




bottom 




paddi ng- 


left 


Box 


1 1 ength 




Sets width of 








percentage 


padding on element's 








inherit) 




left 




paddi ng- 




Box 


{length | 




Sets width of 


right 






percentage 


padding on element's 








inherit) 




right 




paddi ng- 


top 


Box 


1 1 ength 




Sets width of 








percentage 


padding on element's 








inherit) 




top 





quotes Text { none | stri ng | Sets open and close 

inherit) quotes (when 1 string 

supplied, used for 
both; when 2, 1st 
opens, 2nd closes) 



size Paged 
media 


{auto 1 ength 

1 andscape 1 ength 

portrai t i nheri t ) 


Specifies orientation 
and size of a page box 


table-layout Table 


{auto f i xed 


Determines method 




inherit) 


used to lay out table 






contents 
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(jetting Creative with 
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In This Chapter 

Using CSS to define text formatting 
Working with page colors and backgrounds 
Changing font display 
Adding text treatments 



efore style sheets came along, HTML markup controlled backgrounds, 
colors, fonts, and text sizes on Web pages. However, style sheets and the 
ability to separate style information from content let designers use Cascading 
Style Sheets (CSS) to control font, color, and other style information. 

The use of CSS to control such elements 

V Provides better control when updating or editing formatting information 

i>* Prevents HTML documents from becoming cluttered with <f ont> tags 

t-«* Provides more options for formatting your text, such as defining line 
height, font weight, and text alignment, and converting text to uppercase 
(capital letters) or lowercase 

(X)HTML still includes a few formatting elements, such as <tt>, <i >, <bi g>, 
<b>, and <smal 1 >; however, the remaining formatting elements, such as 
<f ont>, are deprecated. That means they're no longer recommended for 
use (although they still work, and most browsers recognize them). 
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Color Values 

defines color values in two ways: 





By name (you choose from a limited list) 

By number (harder to remember, but you have many more options) 



Color names 



The HTML specification includes 16 color names that you can use to define 
colors in your pages. 

The Cheat Sheet bound into the front of this book has information about the 
16 named colors, including names, corresponding hex codes (the six-digit 
hexadecimal numbers that also define the colors), and color swatches. You 
can safely use color names in your CSS markup and be confident that 
browsers will recognize them and use the correct colors in your Web pages. 

Visit www . html help, com/ reference/ html 40 /v a 1 ues . html #col or to see 
how your browser displays these colors. If you can, view this page on two or 
three different computers to see how the browser, operating system, graph- 
ics card, and monitor can subtly change the display. 

This CSS style declaration says all text within <p> tags should be blue: 

p (color: blue; ) 

If you're looking for burnt umber, chartreuse, or salmon, you're out of luck. 
A box of 64 crayons this list is not. You can, however, also find hex codes for 
Web-safe colors, along with color swatches, on the Cheat Sheet. These colors, 
though unnamed, are Web-safe because they reproduce pretty reliably on 
most color computer display devices and printers. 



Color numbers 

Color numbers allow you to use any color (even salmon) on your Web page. 
Hexadecimal color codes 

Hexadecimal notation uses six characters — a combination of numbers and 
letters — to define any color. If you know a color's hexadecimal code (often 
called a hex code for short), you have all you need to use that color in your 
HTML page. 
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Finding any color's hex code 

/rye 



You CcTn'fTtrst\vcr\/£7our magic wand and come 
up with the hex code for any color. But that 
doesn't mean that you can't find out through 
less magical means. Color converters follow 
a precise formula that changes a color's stan- 
dard RGB notation into hexadecimal notation. 
Because you have better things to do with your 
time than compute hex codes, you have several 
options for finding out the code for your color of 
choice, including Web-safe colors on this book's 
Cheat Sheet. None of these make you use a 
calculator: 

V On the Web: Some good sources for hexa- 
decimal color charts are 

www.hypersolutions.org/pages/ 

rgbhex.html 
www.colorschemer.com/online.html 
http://webmonkey.wi red.com/webmonkey/ 

reference/col or_codes 

You simply find a color you like and type the 
hex code listed next to it into your HTML 



Using a converter: If you already know 
the RGB values for a particular color, you 
can plug them into an online converter 

at www . uni vox . com/ home /support/ 
rgb2hex.html to get the hexadecimal 
equivalent. For example, the RGB valuesfor 
a nice sky blue are 159, 220, and 223. Plug 
those into the converter, and you get the 
equivalent hex code #9FDCDF. 

Using image-editing software: Many image- 
editing applications, such as Adobe 
Photoshop or Jasc Paint Shop Pro, display 
the hexadecimal notation for any color. 
Even Microsoft Word's color picker shows 
you hex codesfor colors in an image. If you 
have an image you like thatyou wantto use 
as a color source for your Web page, open 
the image in your favorite editor and find out 
what the colors' hex codes are. 





When you use hexadecimal code to define a color, you should always precede 
it with a pound sign (#). 

This CSS style declaration makes all text contained by <p> tags blue: 

p (color: #0000FF;) 

Unlike the familiar base 10 (decimal) system that uses 10 numerals to repre- 
sent all possible numbers, the hexadecimal (base 16) system uses 16 "numer- 
als." If you want to know more about the hexadecimal system or want to 
convert numbers from decimal to hexadecimal, visit 

http://mathf0rum.0rg/l i bra ry/drmath/ vi ew/ 55830. html 

KGB Values 

You can use two RGB values to define color. These value types aren't as 
common as hexadecimal values, but they're just as effective: 



rgb(r,g,b): The r, g, and b are integers between 0 and 255 that repre- 
sent the red, green, and blue of the color. 
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V rgbir%,q%,b%):7he r%, g%, 
green, and blue of the color. 



and b% represent the percentage of red, 



^^vj^^lor can be defined as a mixture of red. green, and blue (KGB). You 
can use either an RGB value or the equivalent hex code to describe a color's 
RGB value to a Web browser. 



Color Definitions 



You can define individual colors for any text on the Web page, as well as 
define a background color for the entire Web page or some portion thereof. 

CSS uses the following properties to define color: 

i>* color defines the font color and is also used to define colors for links in 
their various states (active, visited). 

background or background-col or defines the background color for 
the entire page or defines the background for a particular element (for 
example, a background color for all first-level headings, similar to the 
idea of highlighting something in a Word document). 



Text 

To change the color of text on your Web page 

1. Determine the selector. For example, will the color apply to all first- 
level headings, to all paragraphs, or to a specific paragraph? 

2. Use the col or property. 

3. Identify the color name or hexadecimal value. 

The basic syntax for the style declaration is: 

selector {color: value; ) 

Here is a collection of style declarations that use the color property: 

body {color: olive; font-family: Verdana, sans-serif; 

background-color: #FFFFFF; font-size: 851;) 
hr {text-align: center;) 
.navbar {font-size: 75%; text-align: center;) 
hi {color: #808000;) 
p.chapternav {text-align: center;) 
.footer {font-size: 80%;} 
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In the preceding CSS rules, the color for all text on the page is defined by 
using the body selector. The color is applied to all text in the body of the 
}t unless otherwise defined. For example, the first-level heading is 
is forest green by using hexadecimal notation. 



Links 





Pseudo classes allow you to define style rules based on information outside 
the document tree. 

The most common CSS use of pseudo classes is to define a style rule for a 
given element in the document tree — a technical term that just means that 
the browser builds a hierarchical representation of all elements in a docu- 
ment, much like a family tree, where every element has a parent and may 
contain a child. For example, : 1 i nk is a pseudo class that defines style rules 
for any link that hasn't yet been visited. 

There are five common pseudo classes that you can use with hyperlinks: 



v 0 : 1 i nk defines formatting for links that haven't been visited. 

v* : vi si ted defines formatting for links that have been visited. 

: focus defines formatting for links that are selected by the keyboard 
(for example, by using the Tab key) and are about to be activated by 
using the Enter key. 

i>* : hover defines formatting for links when the mouse cursor hovers over 
them. 

i>* : acti ve defines formatting for links when they are selected (clicked by 
the mouse). 



The pseudo class name is preceded by a colon (:). 

Pseudo classes can be used with 

Elements (such as the <a> element that defines hyperlinks) 

Classes 

IDs 

For example, to define the style rules for visited and unvisited links, use the 
following syntax: 

i>* This sets the color of any hyperlink pointing to an unvisited URL to red 
by using its hexadecimal value: 

a:link {color: #FF0000;| 
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I This sets any hyperlink that points to a visited URL to appear in the 
named color green: 



M si ted {color: green; I 



This designates unvisited links with a class of i internal to appear in 
(named color) yellow: 



a. internal :link {color: yellow;! 

4?y^~3^ Links can occupy multiple states at one time. For example, a link can be vis- 
ited and hovered over at the same time. Always define link style rules in the 
following order: :link, :visited, rvisible, :focus, :hover, ractive. 

^jtWE T/f^ CSS applies last rule seen to display your page. In this case, if you put the 

pseudo class selectors in the wrong order, your results may not be what you 
want. For example, if visited follows hover, and the two have overlapping 
rules, hover effects apply only to links that haven't yet been visited. 

The following CSS rules render the document with olive as the color for links 
that haven't been visited and yellow as the color of visited links: 



body {color: #808000; font-fam 
a:link {color: olive; ) 
a : vi si ted {color: yellow; I 


ily: Verdana, sar 


is-serif; font-size: 8 


5%;) 



Netscape 4 ignores hover. But it doesn't hurt anything in Netscape 4 to use 
hover (it's just ignored) unless it's a visitor's only clue that the text is a link. 

^gjttNG/ Some browsers don't support pseudo classes with elements such as i i nput or 
^/ Mj^\ se ^ ec t (these are forms elements). Current browsers support their use with 
the a element. Test your results if you want to use pseudo classes with an ele- 
ment other than <a>. 

^vp ^ The CSS specification defines : 1 i n k and : v i s i ted as mutually exclusive, 
"~ "~ and it is up to the browser application to determine when to change the state 
(visited versus unvisited) for any given link. For example, a browser might 
determine that a link is unvisited if you clear your history data. 



Backgrounds 



To change the background color for your Web page, or a section of that page, 
follow these steps: 

1. Determine the selector. For example, will the color apply to the entire 
background, or will it apply only to a specific section? 

2. Use the background-col or or background property. 

3. Identify the color name or hexadecimal value. 
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The basic syntax for the style declaration is: 

background-color: value;} 




lowing collection of style declarations, the first style declaration 
uses the bac kg round - col or property and sets it to light green by using 
hexadecimal notation: 

body {color: #808000; font-family: Verdana, sans-serif; 
background-color: #EAF3DA; font-size: 85% ; } 

You can apply a background color to a block of text — for example, a para- 
graph — much like you define the background color for the entire page. 

You use background as a shorthand property for all individual background 
properties or background-color to set just the color. 

selector (background: value value value} 

See Chapter 8 or "The Shorthand Property" section of Webmonkey's 
"Mulder's Stylesheets Tutorial" for more information. 

http: //webmonkey .wi r ed.com/webmon key/98/1 5/ i ndex3a_page6.html ?tw=authori ng 



Fonts 



You can define individual font properties for different HTML elements with 

Individual CSS properties, such as font-f ami ly, 1 i ne-hei ght, and 
font-si ze 

f" A group of font properties in the catchall shorthand font property 



font family 

To define the font face by using the font family: 

1. Identify the selector for the style declaration. 

For example, making p the selector defines a font family for all <p> tags. 

2. Add the property name f ontfami ly. 

^i-ST(/^ Not all font families are supported by every browser. CSS allows you to 

<j^ / ***f\ specify multiple font families in case a browser doesn't support the font 

family you prefer. You can list multiple font family names, separated by 
commas. The browser uses the first name in the list that is available on 
the computer on which it's running. 
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3. Define a va 1 ue for the property (the name of the font family). 

Use single or double quotation marks around any font family names that 
de spaces. 

To format all first-level headings to use the Verdana font, use a style declara- 
tion like this: 




hi (font-family: Verdana, Helvetica, sans-serif;) 

In the preceding declaration, two more font families are identified in case a 
browser doesn't support the Verdana font family. 

We recommend including these font families in your style declarations: 



u 0 At least one of these common font families: 

• Arial: Sample SAMPLE 

• Helvetica: Sample SAMPLE 

• Times New Roman: Sample SAMPLE 

• Verdana: Sample SAMPLE 
«* At least one of these generic font families: 

• serif: Sample SAMPLE 

• sans-serif: Sample SAMPLE 

• cursive: Sample SG?h7>lg' 

• fantasy: Sample S<3fflP£S 

• monospace: Sample SAMPLE 

Different elements may be formatted using different font families. These rules 
define a different font family for hyperlinks (see Figure 10-1): 



body (color: #808000; font-family: Verdana, sans-serif; font-size: 
hr (text-align: center;) 

a {font -family: Courier, "Courier New", monospace;} 



Sizing 



The following properties allow you to control the dimensions of your text. 
Font size 

The style declaration to specify the size of text is 



selector (font-size: value; 
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3 Company Web Site - Microsoft Internet Explorer 



File Edit View Favorites Tools Help 



□US 



Figure 10-1 

The font 
family for 
hyperlinks 
differs from 
the font 
family for 
the rest of 
the text. 



-ompany 



This is some sample text for a company. This is a link to a Web site: Powered , 
Here are some other links to other parts of the Web site: 

• Company Hi sr. 01-7 

• Services 

• How We Work 

• How Much We Cost 



Company History 



This is some text that tells about the company history. 



j My Computer 



The va 1 ue of the declaration can be 




f One of the standard font property measurement values (listed in 
Chapter 8) 

One of these user-defined keywords: 

xx-smal 1 , x-smal 1 , smal 1 , medi urn, 1 arge, x-1 arge, or xx-1 arge 

The value of each keyword is determined by the browser, not the style 
rule. 



The following rules define 

A relative font value for all text 
i>* An absolute value for the font size for all first-level headings 



body I col or: #808( 


00; font-fami 


y: Verdana, sans-serif; 


font-size: 8S%;} 


hi [color: #808001 


; font-family 


Ari al , Helvetica , sans 


serif; 


font-weight: f 


500; font-size 


24pt;l 





The result appears in Figure 10-2. 
Line height 

The line height of a paragraph is the amount of space between each line 
within the paragraph. 

Line height is like line spacing in a word processor. 
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3 Company Web Site - Microsoft Internet Explorer 


□[□1® 


File Edit View Favorites Tools Help 


ir 



Figure 10-2: 

First-level 
headings 
are 24 
points tall; 
the font size 
of other text 
is relative. 
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This is some sample text for a company. This is a link to a Web site: Powered . 
Here are some other links to other parts of the Web site: 

• Company History 

• Services 

• How We Work 

• How Much We Cost 



Company History 



This is some text that tells about the company history. 



^ My Computer 



To alter the amount of space between lines of a paragraph, use the 1 i ne - 
height property: 

selector lline-height: value;) 

The value of the 1 i ne - hei ght property can be either 

V 0 One of the standard font property measurement values (listed in 
Chapter 8) 

A number that multiplies the element's font size, such as 1 . 5 

We assign a quotation class to the first paragraph throughout this chapter 
so you can see the changes. This allows us to apply these styles to the first 
paragraph by using 

<p cl ass="quotati on"> 
in the HTML document. 

The following rules style the first paragraph in italics, indent that paragraph, 
and increase the line height to increase readability (see Figure 10-3): 

body {color: #808000; font-family: Verdana, sans-serif; font-size: 85%;) 
.quotation (font-style: italic; text-indent: lOpt; line-height: 15018;) 
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Figure 10-3: 

Any element 
within the 

quotati on 
class has 
the same 
formatting. 
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This is some sample text for a company. This is a link to a Web site: 
Powered . Here are some other links to other parts of the Web site: 

• Company History 

• Services 

• How We Work 

• How Much We Cost 

Company History 

This is some text that tells about the company history. 

Services 



6] Done 



j My Computer 




Character spacing 

You can increase or reduce the amount of spacing between letters or words 
by using these properties: 



word-spaci 


n g : The style declaration f or w o r d - s p a c i n g is 




selector (word-; 


pacing: value;} 






Designers call the space between words tracking. 

1 etter-spaci ng: The style declaration for 1 etter-spaci n 


3 is 


selector {letter-spacing: va 


/ue; ) 





Designers call the space between letters kerning. 

The value of either spacing property must be a length defined by a standard 
font property measurement value (listed in Chapter 8). 



The following code increases the letter spacing (kerning) of the second para- 
graph (see Figure 10-4): 

body (color: #808000; font-family: Verdana, sans-serif; font-size: 85%;) 
.quotation (font-style: italic; text-indent: lOpt; letter-spacing: 6px;) 



Positioning 



Alignment properties allow you to control the shape of text blocks. 
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Figure 10-4: 

Kerning can 
be larger or 
smaller than 
the font's 
normal 
spacing. 
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This is some sample text for a company. 
This is a link to a Web site: Powered . 
Here are some other links to other parts 
oft h e W e b site: 

• Company History 

• Services 

• How We Work 

• How Much We Cost 



Company History 



This is some text that tells about the company history. 



6J 
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Alignment 

Alignment determines whether the left and right sides of a text block are 

If* Flush: Starting or ending together 
Ragged: Starting or ending at different points 

Syntax 

Alignment is defined with the text-align property. The style declaration to 
align text is: 

selector (text-align: value;} 

The value of the text-align property must be one of the following keywords: 

W 1 eft aligns the text to the left. The right side of the text block is ragged. 

right aligns the text to the right. The left side of the text block is 
ragged. 

center centers the text in the middle of the window. Both sides of the 
text block are ragged. 

V j usti fy aligns the text for both the left and right side. The spacing 
within the text in each line is adjusted so both sides of the text block 
are flush. 

Justifying text affects letter or word spacing in the paragraph. Test the 
results before displaying your Web pages to the world. 
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Markup 

following example defines the alignment for the first-level heading and 
aragraph (see Figure 10-5): 



body (color: #808000; font-family: Verdana, sans-serif; font-size: 85%;) 
hi {color: #808000; font-family: Arial, Helvetica, sans-serif; 

font-weight: 800; font-size: 24pt; text-align: center) 
.quotation Ifont-style: italic; text-indent: lOpt; text-align: left;) 
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Our Company 




/\ 


Figure 10-5: 


This is some sample text for a company. This is a link to a Web site: 
Powered. Here are some other links to other parts of the Web site: 




The first- 
level 
heading is 


• Cotmpanv History 

• Services 

• How We Work 

• How Much We Cost 






centered; 
the first 


Company History 






paragraph is 


This is some text that tells about the company history. 






aligned to 
the left. 








Services 




V 
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Indent 

You can define the amount of space that should precede the first line of a 
paragraph by using the text-indent property. 

This doesn't indent the whole paragraph. That requires CSS box properties, 
such as mar gi n- 1 eft and margin-right (see Chapter 9). 

Syntax 

The style declaration used to indent text is 

selector I text-i ndent : value;} 

The value must be one of the standard length property measurement values 
(listed in Chapter 8). 

Markup 

As seen in this chapter, the quotati on class has a text-i ndent of 10 points. 



body (color: #808000; font-family: Verdana, sans-serif; font-size: 85% ; ) 
.quotation Ifont-style: italic; text-indent: 1 Opt ; ) 
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s you to decorate your text by using boldface, italics, underline, 
or line-through, and even allows your text to blink (when supported 
by browsers). 



Botd 

Using a boldface font is one of the more common text embellishments a 
designer uses. To apply boldface in HTML, use the <b> tag. However, CSS 
provides you with more control over the font weight of the bolded text. 



Syntax 

This style declaration uses the font-weight property: 



selector {font-weight: value;} 



The value of the font-weight property may be one of the following: 

bold: Renders the text in an average bold weight 

bol der: Relative value that renders a font weight bolder than the cur- 
rent weight (possibly assigned by a parent element) 

lighter: Relative value that renders a font weight lighter than the cur- 
rent weight (possibly assigned by a parent element) 

norma 1 : Removes any bold formatting 

W One of these integer values: 100 (lightest), 200, 300, 400 (normal), 500, 
600, 700 (standard bold), 800, 900 (darkest) 

Markup 

The following example bolds hyperlinks (see Figure 10-6): 

body (color: #808000; font-family: Verdana, sans-serif; font-size: 85%;) 
a {font-weight: bold;} 

a:link {color: olive; text-decoration: underline;) 
a : vi si ted (color: olive; text-decoration: none;) 



Italic 

Italics are commonly used to set off quotations or to emphasize text. To 
apply italics in HTML, use the < i > tag. However, CSS provides you with more 
control over the font style of text through the font-style property. 



Syntax 

This style declaration uses the font-style property: 



selector (font-style: value;} 
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Figure 10-6: 

All 

hyperlinks 
are bolded. 
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This is some sample text for 3 company, This is a link to a 


Web 






Powered. Here are some other links to other parts of the 


Wet 


site: 




• Company History 








• Services 








• How We Work 








• How Much We Cost 








Company History 








This is some text that tells about the company history. 








Services 






V 




a 


My Computer 



The value of the font-style property may be one of the following: 

i>* italic: Renders the text in italics (a special font that usually slants) 

obi i que: Renders the text as oblique (a slanted version of the normal 
font). 

V normal : Removes any italic or oblique formatting. 
Markup 

The following example assigns an italic font style to the first-level heading: 



body (color: #808000; font-family: Verdana, sans-serif; font-size: 85% ; I 
hi (color: #808000; font-family: Arial, Helvetica, sans-serif; 

font-style: italic; font-weight: 800; font-size: Z4pt; text-align: center;) 

Capitalization 

You use the text-transform property to set capitalization in your document. 
Syntax 

This style declaration uses the text-transform property: 

selector (text-transform: value;] 
The value of the t e x t - 1 r a n s f o r m property may be one of the following: 

f capital i z e : Capitalizes the first character in every word 

i>* uppercase: Renders all letters of the text of the specified element in 
uppercase. 
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I 1 owercase: Renders all letters of the text of the specified element in 
lowercase. 
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: Keeps the value of the inherited element. 



Markup 

The following example renders the first-level heading in uppercase (shown in 
Figure 10-7): 



body (color: #808000; font-family: Verdana, sans-serif; font-size: 85%;) 
hi (color: #808000; font-family: Arial, Helvetica, sans-serif; 

font-weight: 800; font-size: 24pt; 

text-align: center; text-transform: uppercase;) 



Figure 10-7: 

The 
first- 1 eve I 
heading 
is rendered 
in all 
uppercase. 
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This is some sample text for a company. This is a link to a Web site: Powered. 
Here are some other links to other parts of the Web site: 

• Company History 

• Services 

• How We Work 

• How Much We Cost 

Company History 

This is some text that tells about the company history. 

Services 



j My Computer 



The text-decoration property 

The text-decoration property allows for a bit more crazy text formatting 
It isn't used often. 

Syntax 

This style declaration uses the text-decoration property: 

selector (text-decoration: value;} 

The value of the t e x t - d e c o r a t i o n property may be one of the following: 

i>* under) ine: Underlines text. 

overl i ne: Renders the text with a line over it. 
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v 0 line-through: Renders the text with a line through it. 
blink: Blinks the text on the screen. 
iyou sure you want blinking text? 

• blink isn't supported by all browsers. 

• blink can be dreadfully annoying and distracting, 
none: Removes any text decoration. 

Markup 

The following example changes the link when the mouse hovers over it. In 
this case, it turns off any underlining for a link: 

body (color: #808000; font-family: Verdana, sans-serif; font-size: 85%;) 
a : 1 i n k (color: olive; text-decoration: underline;) 
a : vi si ted (color: olive; text-decoration: underline;) 
a:hover (color: olive; text-decoration: none;) 



The catchall font property 



Many font properties can be summarized in one style declaration by using 



the shorthand font property. When it's usee 
define a combination of font properties: 


, only one style rule 


s needed to 


selector (font: valut 


1 value value 


) 






The value of the font property is 
various font properties: 


a list of any values that correspond to the 



V The following values must be defined in the following order, though they 
need not be consecutive: 

• font-size (required) 

• 1 i ne- hei ght (optional) 

• font-family (required) 

The font-family value list must end with a semicolon. 

V Use commas to separate multiple font family names. 

i>* The following values are optional and may occur in any order within the 
declaration. Individual values are separated by spaces: 

• f ont-styl e 

• f ont- va ri ant 

• f ont-wei ght 
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For example, you can use the following style declaration to create a specific 
style for a first-level heading: 



italic bold 150% Arial, Helvetica, sans-serif;) 




The preceding markup uses properties in the follow order: font-style, 
f ont-wei ght, font-si ze, and f ont-f ami ly (the list uses commas to sepa- 
rate specific font families) ending with the required semicolon. For a com- 
plete listing of CSS shorthand properties, consult Appendix B at the end of 
this book. 




Chapter 11 

Drop ^Psfn k fl s rablesforStunning Pages 

In This Chapter 

Understanding table benefits 

Mapping a table design 

Building simple tables 

Stretching items across multiple cells 

Adding images, hyperlinks, or text to table cells 

Table tips and techniques 



^historically, tables contain and lay out tabular data. However, in 
¥ w (X)HTML they serve an entirely different purpose — to control Web 
page layout. Most Web pages contain at least one table — some even nest 
tables within tables. (X)HTML tables can present everything from text to 
images on your pages efficiently and attractively. 

Also, CSS provides plenty of positioning capability to give designers more 
flexibility and precision when working with tables: a "killer combination!" 

This chapter provides step-by-step instructions for building and using 
(X)HTML tables and then using CSS to control their presentation. Use our 
best tried-and-true tips and techniques to speed up and simplify your efforts. 



What Tables Can bo for \lou 

Traditionally, tables display data in formats that are easy to read and under- 
stand. (X)HTML changed all that. Many Web sites use tables. Sites such as 
Amazon.com, eBay, Yahoo!, and Google all use tables to display their content, 
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even if you can't see them in an obvious way. In fact, such invisible tables 
dominate the Web. The ideas that drive them are: 



DBooks 



i tables to arrange items on your Web page. 
i>* Turn borders off so users can't see these tables. 

By nature, Web pages start out linearly. Tables allow you to step out of a 
linear mode and put text and images in more interesting places on a page. 



You can use tables in a couple of ways: 

f Traditional (ho-hum) method: You can define table or individual cell 
widths by using absolute numbers. This type of table doesn't resize 
when users resize their browser windows. 

Some designers prefer to use tables for the traditional purpose — to pre- 
sent data — a straightforward, balanced approach that's easily tackled. 

i>* Presentation-focused (wow) method: You can define table and cell 
width by using percentages. This table resizes when users resize their 
browser windows. 

Most designers perform creative, complex tricks with their tables. 

Although this chapter covers all aspects of HTML tables, it focuses on layout 
tips and techniques. 

When you use tables for layout, they can result in a couple of outcomes: 

f* Tables can produce complex layout structures, as shown in Figure 11-1. 
(Some other examples of complex tables are viewable at www . ama zon . 

com and www .ya hoo .com.) 

^ After you open these Web pages in your Web browser, look at each 

page's HTML source code (try ViewOSource from your menu bar). 
Observe how complex the markup is, and mark ye well when the markup 
looks haphazardly arranged (alas, if only they'd asked us . . .). 

v* Some Web page design models keep the interface simple with the less-is- 
more approach — and therefore easy to use. Figure 1 1-2 shows the 
simple approach. 

www . googl e . com uses a simple table to arrange navigation. 
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Table 




Figure 11-1: 

This Web 
page uses 
three 
different 
tables for 
layout. 



Table 



Table 



Use (X)HTML and CSS in tables 



(X)HTML tables can require some finesse to 
make them do just what you need. But about 10 
percent of Internet surfers use browsers that 
don't support CSS. This means tables usually 
should be a basic foundation for page design. 
We recommend using 

u* (X)HTML tables to lay the basic foundation 
for your page 



t>* CSS to provide additional table formatting 

If you know your target users use updated 
browsers, you can use CSS for all your position- 
ing needs. For example, if you're designing an 
intranet Web site for a group of computer pro- 
grammers, you can require that its viewers use a 
newer browser only and eliminate table ele- 
ments completely, if you like. 
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'3 Google - Microsoft Internet Explor 



File Edit View Favorites Tools Help 
: ^ httpv'/www. google. com/ 



Figure 11-2: 

This Web 
page uses 
one simple 
table with 
three cells 
for its 
layout. 



Google 



Web Images Groups News Frooqie more » 



I 



Google Search || I'm Feeling Lucky 

Ways to help with tsunami relief 



Advertising Programs - Business Solutions - About Google 
Make Google Your Homepage! 
©2005 Google - Searching 8.053.044 651 web pages 



,ir ■■•-■.I fi 
Language Tools 



•£ Internet 



Table Basics 




The complexity of HTML tables is built from three basic elements 



Borders: Every basic table must always have exactly four borders that 
make up a rectangle. 

Cells: These are the individual squares (spaces) within the borders of a 
table. 

v 0 Cell span: Within that four-walled structure, you can delete or add 
cell walls (as shown with the cells on the right side of the table in Fig- 
ure 1 1-3). When you delete cell walls, you make a cell span multiple 
rows or columns — and that's exactly what makes a table a flexible 
tool for layout. 

Cell spanning and cell width work differently: 

When you span cells, you change cell space by combining, or merging, 
cells. This step removes cell walls. 

f When you increase the width of a cell, you only change the space within 
that cell. 
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Figure 11-3: 

You can use 
an HTML 
table to lay 
out Web 
pages. 
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Sketching \lour Table 

Tables can become complex. You need to carefully plan them. Mapping to the 
nearest pixel can grow tedious and can take several attempts, but it's an 
essential step in designing a well laid out page. 



beVeiopinq layout ideas 

Start with a general idea and slowly plan your layout until it becomes more 
solid and specific. Follow these basic steps: 

1. Grab (believe it or not) a sheet of paper and a pencil so that you can 
sketch out your ideas. 

Start with a general idea of where you want everything to go on your 
page. 

2. Evaluate what to include in your Web page and decide on the overall 
layout. 
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This way, you can begin to determine 

• How many columns and rows you need 
The width of the table and cells 

• Whether to make any cells span rows or columns 
You need to make the following design choices: 

• Whether the table will be centered, left aligned, or right aligned. 

• Whether you want to include hyperlinks and where you might want 
to include them. 

For example, many Web sites, such as the one in Figure 11-1, 
include a logo image that provides a hyperlink to the site's home 
page, so no matter what page you're on, you can always get back 
to the front door. 

Figure out the pixel dimensions of images you want to use. Make sure 
that the table fills a browser window nicely without forcing the user to 
scroll left and right to see everything. 

Decide between using text or images for navigation, as follows: 

• If you want more font control over your navigation, consider using 
images for your navigational items. 

The font is embedded in the image; therefore, the user's browser 
settings can't override the font you choose. 

• If you don't need additional font controls, use textual navigation. 

• Decide where the main logo should go and what size it should be. 

In Figure 11-2, the logo is the main focal point. Its dimensions are 
276 pixels wide by 1 10 pixels tall. 

Concentrate on managing the width of the table. Let the contents of your 
table determine the cell height. Height is less important because users 
are familiar with scrolling up and down Web pages. However, they may 
get frustrated by scrolling left and right to read content. 



braftmq the table 

When you know how big and how numerous your design elements are, you 
can sketch a rough table on paper. 

If you opt for a simple approach, each main element (logo, hyperlink image, 
and navigation) has its own cell. In Figure 11-4, that means only three cells. 
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If you have only a few cells, you'll probably have to span the cells so the con- 
tents fill the width of your page. 

mplex design may need several rows. 

A simple, clean design (such as the one in Figure 1 1-4) may require only 
two rows. 

Figure 1 1-4 shows the final sketch for your table: 

• The first row spans both columns. 

• The second row contains two separate columns. 
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Figure 11-4: 

Start by 
sketching 
the table 
dimensions, 
even before 
opening a 
text editor. 
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The author of our sample Web site uses images in place of text for the naviga- 
tional elements; however, for usability reasons, try using text in place of 
images when possible. Even so, if you want complete control of the font(s) in 
which your text appears, you may have to use images — and create an image 
of the text written in your chosen font. 



Constructing Basic Tables 

When you have a sketch that gives a pretty solid indication of the page and 
table layout, you can open your HTML editor and create the skeleton of your 
table. 



Components 

The building blocks for your table's framework are the three basic compo- 
nents of any table: 

I Table: <tabl e> 
Table row: <tr> 
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< t r > is always enclosed within < t a b 1 e > . 
Table (data) cell: <td> 

is always enclosed within <tr>. 



With these three elements, you can build a simple table. 

The <tabl e>, <tr>, and <td> opening and closing tags are required. If you 
forget to include any, your table won't display correctly in most browsers. 



Layout 



Tables come in many forms and at varying levels of complexity. A simple two- 
dimensional data table that's part of a Web page is easier to design and imple- 
ment than a more complex table layout that contains an entire Web page. As 
you read through the following sections, you will see and appreciate this dis- 
tinction clearly. 



Creating a simple table 

The <tabl e> tag and its markup typically appear between the <body> tags in 
your document. However, you can also use them within most block elements 
and within the <td> and <th> tags to nest tables. (See the "Nesting tables 
within tables" section later in this chapter.) Use the following markup to 
create a simple table with two rows and two columns (four data cells) — 
replacing cell 1, cell 2, and so on with your text: 



<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 


"http: //www. w3.org/TR/xhtmll/DTD/xhtmll -transitional . dtd " > 


<html xmlns= 


"http://www.w3.org/1999/xhtml "> 


<head> 




<title>Tables</title> 


</head> 




<body> 




<table> 




<tr> 




<td> eel 


1 1 </td> 


<td> eel 


1 2 </td> 


</tr> 




<tr> 




<td> eel 


1 3 </td> 


<td> eel 


1 4 </td> 


</tr> 




</table> 




</body> 




</html> 





The preceding example creates a table with two rows based on the sketch in 
Figure 11-4. The first table row encloses cells 1 and 2; the second table row 
encloses cells 3 and 4. 
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Table rows always run horizontally, and the contents of each cell — in this 
case, cell 1 , cell 2, and so on — are contained within their own <td> ele- 
n't forget that you must close your table tags, or your table will not 
orrectly. 

Creating a table-based Web paae 

To create the shell of your table-based Web page (for example, one based on 
the sketch from the preceding section, Figure 11-4), follow these steps: 

1. Start with the <tabl e> element: 

<table> 




</table> 

The <ta bl e> element can have a number of optional attributes (for 
example, border = " 1 " or bgcol or="bl ack") — for now, however, keep 
it simple. 

2. Decide how many rows you want the table to have: 

The following markup creates a table with two rows: 

<table> 
<tr>. . .</tr> 
<tr>. . .</tr> 

</table> 



tfi-STOjc C reate cells in each row with the table data cell (<td>) element. 



Each <td> element creates a cell, so the number of <td> elements in a 
row is the number of columns. 

The sketch in Figure 11-4 shows a two-column table with three cells: the 
first row contains one cell, and the second row contains two cells. The 
markup for this arrangement looks like this: 

< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" 

"http://www.w3.org/TR/xhtml 1/ DTD/xhtml 1-transitional . dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml "> 

<head> 

<title>Tables</title> 
</head> 
<body> 
(table) 
<tr> 

<td> contents </td> 
</tr> 
<tr> 

<td> contents </td> 
<td> contents </td> 
</tr> 

</table> 

</body> 

</html> 
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~ ^rthMgrrrabresT/TCre invented to contain and 
display data, they're now most commonly used 
to control Web page layout. This chapter focuses 
on the elements that designers use to control 
layout. If you want to create a traditional table, 
you can use these table elements: 

is* <th>: The table header element displays text 
in boldface with a default center alignment. 

You can use the <th> element within any 
row of a table, but you most often find and 
use it in the first row atthe top — or head — 
of a table. Except for their position and ego- 
tism, they adjust like table data (<td>)tags 
and should be treated as such. 

is* <capti on>: This is the table caption ele- 
ment. It is designed to exist anywhere 
inside the <tabl e> . . . </table> 
tags but not inside table rows or cells 
(because then they wouldn't be captioning 
anything). This element can only occur 
once pertable. 

Similar to table cells, captions accommo- 
date any HTML elements that can appear in 
the body of a document (in other words, 
inline elements), but only those. By default, 
captions are horizontally centered with the 
table, and their lines wrap to fit within the 
table's width. The <caption> element 
accepts the a 1 i gn attribute. 

<tbody>: You can group table rows into a 
table body section with the table body 
(<tbody>) element. 

A recent addition to the HTML 4 specifica- 
tion, these elements allow table bodies to 
scroll independently of the table head 
(<thead» and table foot (<tf oot». The 
table body should contain rows of table 



Other table elements 



data. The <tbody> element must contain 
at least one table row(<tr>). 

<thead>: You can group table rows into a 
table head section by using the table head 
(<thead>) element. The table head con- 
tains information about the table's columns. 

The <thead> element must contain at 
least one table row. 

<tfoot>: Much like the <thead> ele- 
ment, you can group table rows into a table 
footer section by using the table footer 
(<tf oot>) element. The table footer con- 
tains information about the table's columns 
and must contain at least one table row. 

Include your footer information before the 
first instance of the <tbody> element so 
that the browser renders that information 
before taking a stab at all the content data 
cells. 

<colgroup>: This element creates an 
explicit column group. You specify the 
number of columns by using the span 
attribute or by using the <col > element, 
which we define shortly. 

You use the span attribute to specify a uni- 
form width for a group of columns. 

<col >: The <col > element is an empty 
element. You use the <col > elementto fur- 
ther define column structure. The <col > 
element shouldn't be used to group 
columns — that's the <col group> ele- 
ment's job. You use the <col> element 
after you define a column group and set a 
uniform width to specify a uniform width for 
a subset of columns. 
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Here's where tables can get a bit tricky. A simple table with an even number 
of rows and columns (say two rows and two columns) is a piece of cake — 
discover as you get more handy at designing your own pages that 
s aren't likely to produce such symmetrical tables very often. If 
your cell will span more than one row or column (such as the first cell in the 
preceding example), you have to add an attribute that tells the browser 
which cell does the spanning. 



The number in the attribute corresponds to the number of columns or rows 
you want the cell to span, which means if you're creating a table like the one 
in our example, you have to add the c o 1 s p a n = " 2 " attribute to the f irst < t d > 
element. (The first cell in the table spans across two columns.) 



See the section, "Adding Spans," later in this chapter for more information. 
But for now, assume that you're creating a table like ours. The markup looks 
like this: 



<table> 
<tr> 

<td col span="2"> contents </td> 
</tr> 
<tr> 

<td> contents </td> 
<td> contents </td> 






</tr> 
</table> 







Congratulations, you're done with your first table. Well, sort of. To effectively 
use tables for layout, you need to know how to control several display issues, 
such as borders, table widths, and the handling of white space within your 
table. (For example, without borders, you can't really tell the table is there — 
it won't show up in your browser. This isn't a bad thing or a good thing, but 
something that you can change if you want your borders to show up in 
browsers.) Keep reading for more information on completing your table and 
integrating it into your page. 



Adding borders 

A table border defines the outer edge of the table. 




When the table is used to arrange elements on a page, you don't want a visi- 
ble border. There are two ways you can turn a table border on or off: 



Set the border attribute within the <tabl e> element. The value of the 
border attribute must be an integer that defines the border thickness in 
pixels. 
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To turn the border off, set the border attribute equal to 0: <tabl e 
border="0"> 



DBooks 

You 



ne a border using the CSS border properties. 



You may define the border style, width, or color by using CSS. (See the 
later section, "Using CSS border properties.") 

Using the (X)HTML border attribute 

For an (X)HTML table, border refers to both 

v 0 Outside borders 

Individual cell borders 



You use the border attribute to turn all these table borders on or off. 



To turn the table (and cell) border on, add the border attribute to the 
<tabl e> start tag, as shown in the following bold markup: 

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http://www.w3.org/TR/xhtml 1/ DTD/xhtml 1 -transi ti onal . d t d " > 
<html xmlns=" http://www.w3.org/1999/xhtml "> 

<head> 

<title>Tables</title> 
</head> 
<body> 

<table border="l"> 

<tr> 

<td col span="2"> contents </td> 
</tr> 
<tr> 

<td> contents </td> 
<td> contents </td> 
</tr> 
</table> 

</body> 
</html> 



The value of the border attribute defines the thickness of the border in pixels. 
For example, bo rde r= " 5 " produces a 5-pixel border. If you leave this attribute 
off, most browsers don't display a border. However, if you don't want your 
border visible, we suggest that you add border=" 0" to turn off the border for 
sure. 



Where clear delineation between cell contents is desirable, such as with price 
charts, real data tables, and other collections of text or numerical data, bor- 
ders help visitors break what they're seeing into separate bits of information. 
But when a table is used to organize a Web page that all hangs together 
nicely, turning borders off can help to reinforce this cohesiveness. 



Chapter 11: Using Tables for Stunning Pages 



By default, most browsers use an invisible 2-pixel border on tables. When you 
design your table, you should do one of the following: 

) J^^^w for those invisible 2-pixel borders in your design. 
IS Configure your own borders. 

I is Eliminate the border by setting the border attribute to equal 0 

(border="0"). 

Turn on the table border when you're first creating and tweaking your table. 
Sometimes it's difficult to see just what is going on without a border. After 
you've finished tweaking your table, you can turn off the border. 

If you use tables to lay out content, table borders should probably be turned 
off when you display your Web page to the world because borders can be dis- 
tracting and make text that's supposed to flow together hard to read. 

Using CSS border properties 

Unlike the (X)HTML border attribute, CSS allows you to define border styles 
for any or all of the border sides. For example, you can define a dotted gray 
border for the left side of the table and leave the rest of the table border 
invisible. 

Style 

As you might expect, the border-style property allows you to define the 
style (such as dotted or solid) of the border. 

The style declaration used to add a border style is: 

selector I border-sty 1 e : value;] 

The value for the border-style property must be one of the predefined 
keywords: 



IS 


dotted 


IS 


dashed 


IS 


solid 


IS 


doubl e 


IS 


groove 


IS 


ri dge 


IS 


i nset 


IS 


outset 
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To create a solid border, use the following style declaration: 

order-style: solid;) 



Similar to using the (X)HTML border attribute, you can define the border 
width in pixels. However, CSS provides you with additional width value data 
types to choose from. The style declaration used to add a border width is: 

selector Iborder-width: value;} 

The value for the border-width property can be 

*<" A predefined keyword: thin, medi urn, or t hi ck 

t<" An absolute or relative length 

See the Chapter 8 sidebar, "Property measurement values," for more 
information. The values described in that sidebar are relevant to HTML 
as well as to CSS. 

To set the width of a border to 1 pixel, use the following style declaration: 



table {border-width: 


lpx;) 








Color 

The style declaration used to define a border color is: 




selector (border-color: value;} 













The value for the border-color property must defined using a predefined 
color name or a hexadecimal value: 

i>* Color name: aqua, black, blue, fuchsia, gray, green, 1 i me, maroon, 
navy, olive, purple, red, silver, teal, white, or yellow 

Hexadecimal value: See Chapter 10. 
To set the color of a border to black, use the following style declaration: 

table {border-color: black;) 
IXs'mq the catchall border property 

Similar to defining font properties, you can use the shorthand border prop- 
erty to define multiple style rules at once: 

table {border: lpx solid gray;) 



Chapter 11: Using Tables for Stunning Pages 



There are five catchall border properties that you can use for a table or 
a box: 

er: Defines formatting for all four sides. 

V border- 1 eft: Defines formatting for the left side, 
border-right: Defines formatting for the right side. 

V border-top: Defines formatting for the top. 

i>* border-bottom: Defines formatting for the bottom. 

The border properties aren't only for use with tables, they're part of the CSS 
box model. They can provide borders for almost any (X)HTML element, as 
long as it isn't an inline element. 



Adjusting height and Width 

Most browsers determine the width of the table cells by judging the content 
of the cells (images and/or text). 

The browser provides as much space as possible to contain the content. 
However, there are limits for both images and text: 

Side-by-side images must fit in the width of the browser window. 

For example, if you have an image that is 200 pixels wide, the cell 
expands to accommodate the image. However, if you have several cells 
in a row, each with images over 400 pixels wide, the cells only expand as 
far as the browser window allows. 

Text may expand and distort the layout. 

If a cell contains a lot of text, the cell expands as far as it can until the 
first line break or the end of the text. That might make for a very unat- 
tractive table. 

Most tables are used to help control layout, so controlling the width of cells 
and the table is very important. You have two ways to control width: 

W Use the (X)HTML width attribute within the<table>or<td> element. 

V Assign a width value toa<table>or<td> element using the CSS width 
property. 

The (K)MTML Width attribute 

If you don't set table and cell width, the user's browser determines the width 
of every cell according to the width of its contents — no more, no less. 



DropBook© 



Part III: Taking Precise Control Over Web Pages 



items in ti 
use the w 




For example, suppose you want to put a logo in the first cell and navigational 
items in the cell to its left. If you don't assign the width to the first cell (con- 
e logo), the navigational items are placed right beside the logo, with 
ost no space between the two. To avoid that cramped look, you can 
use the width attribute to strategically define an exact number of pixels 
between the logo and navigational items. 




If you're using tables for layout purposes, we recommend that you set the 
width for the table and cells. 

Syntax 

Defining width is easy when you use the width attribute. For example, you 
can set the width of your table at 630 pixels like this: 

<table border="l" width="630"> 

</table> 

The value of the width attribute can be defined in either 

Pixels (a positive integer, such as 630) 
This is an absolute value. 

Percentage of the display area width (a positive integer followed by a 
percent sign, such as 95%) 

This is a relative value that allows your table to be resized depending on 
the size of the browser window. 

These values can also set the width of individual cells. 

Markup 

To add widths to the table built earlier in this chapter (and to set width for 
its individual cells), add the following markup shown in bold text: 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http: //www. w3.org/TR/xhtml 1/ DTD/xhtml 1 -transi ti onal . d t d " > 
<html xml ns=" http : //www. w3.org/1999/xhtml "> 
<head> 

<title>Tables</title> 
</head> 
<body> 

<table border="l" width=°630"> 

<tr> 

<td col span="2" width="630"> contents </td> 
</tr> 
<tr> 
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</body> 



<td width="400"> contents </td> 
<td width="230"> contents </td> 



body) 
</html> 

Figures 11-5 and 11-6 show the difference between a site that doesn't define 
table and cell widths and one that uses the wi dth attribute. 



Figure 11-5: 

This image 
doesn't 
define width 
properties. 
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Figure 11-6: 

This image 
defines 
width 
properties. 
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If you set the pixel width smaller than the content's pixel size, the browser 
ignores the wi dth attribute and defaults to display all the cell contents. So 
check all dimensions. 



The CSS wtidth property 

The style declaration used to define width is: 

selector (width: value; \ 
The value for the width property must be either 

auto 

This keyword allows the browser to determine the necessary width. 
An absolute or relative length: 

See the Chapter 8 sidebar "Property measurement values" for more 
information. 
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To set the width of the table displayed in Figure 11-6, use the following style 
declarations: 



idth: 630px ; ) 
ne {width: 630px ; } 
td . eel 1 two {width: 630px ; } 
td.cellthree {width: 630px; 



Padding and spacing 

Determining the white space between cells is essential for proper layout. 
Keeping in mind the sketch from Figure 11-4, you have to determine — to the 
pixel — how space will be used in your table. 

(X)HTML attributes 

Two attributes can help you define white space by putting some space 
between cells: eel 1 paddi ng and eel 1 spacing. These attributes use two dif- 
ferent techniques to put some space between cells: 

If" cellspacing adds space between cells (the border width is adjusted). 
f"cellpadding adds space inside a cell (within the cell walls). 

The value for either attribute is defined in pixels. For example, eel 1 - 
paddi ng="5" adds 5 pixels' worth of padding to each cell. 

To define either attribute, add it to the <tabl e> start tag, as follows: 

<table eel 1 p a d d i n g = " 5 " eel 1 spaci n g = " 5 " > 

When using tables for layout, without visible borders, it doesn't matter much 
which attribute you use. However, if you add color to your tables — or use 
the border for any reason — you can see a considerable difference. That's 
because cellpadding increases the space within the border, and cell 
spacing increases the width of the border itself, as shown clearly in Fig- 
ures 11-7 and 11-8. 

The default value for eel 1 paddi ng is 1; the default for eel 1 spacing is 2. 
If you don't define eel 1 padding and eel lspacing, your users' browsers 
assume the defaults. Accounting for those pixels in your sketch is a good 
idea. 
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Figure 11-7: 
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Figure 11-8: 

The 

cellspacing 
attribute 
increases 
the width of 
the border. 
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Working with cellpadding and cellspacing to get your table layout just right 
can be a bit of a headache. Sometimes you need to create empty cells to help 

^^ohtroMayout. Although this trick is a bit of a workaround, many designers 

VjsFv^u just 

1. Create a cell. 

2. Fill the cell with either 

• <br /> 

• A spacer image (a transparent . g i f that is 1 x 1 pixel) with which 
you can manipulate the width 

CSS 

You can use CSS to control cell padding and spacing between cells. 
Within cetts 

To control the padding within cells, you use the padding property, like so: 

selector Ipadding: value;} 

The value for the padding property must be defined by an absolute or rela- 
tive length, or percentage. 

To set the padding of a table cell, use the following style declaration: 

td (padding: lOpx; ) 

The paddi ng property can be used with most (X)HTML elements. For example, 
if you created a footer and assigned it a class name, you can define padding for 
the element using the following style rule: 

.footer { padding: 5px;| 
Between celts 

You can control the spacing between your cells using the border-spacing 
property: 

selector Iborder-spacing: value;} 

The value for the border-spacing property must be defined by an absolute 
or relative length, or percentage: 

To set the padding of a table cell, use the following style declaration: 

td {padding: lOpx; ) 
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The border-spacing property can be used only in conjunction with the 
<td> element. 

oks 

Shifting alignment 

If you use tables to define your layout, you need to control their placement in 
the browser window. You can do this by using (X)HTML or CSS. 

You use attributes that are part of the HTML standard to align your tables 
(horizontally) and your table contents (horizontally and vertically). 

Aligning tables is similar to aligning images. 
Horizontal alignment 

You can horizontally align cell contents using the align attribute in various 
table elements. 

To align your table horizontally, use the align attribute with the 
<tabl e> element. 

The align attribute, when used with the <tabl e> element, has the fol- 
lowing possible values: left, ri ght, or center of the document. 

V You can use the align attribute with the <td> (cell) or <tr> (row) ele- 
ments to align text within the cell or row. 

The values that can be used with the align attribute in the <td> or 
<tr> elements are 

a 1 i g n = " r i g h t " : Aligns the table or cell contents against the right side. 

a 1 i g n = " 1 e ft " : Aligns the table or cell contents against the left side. 
(This is the default setting.) 

• a 1 i gn = " center ": Centers the table or cell contents. 

• a 1 i g n = " j u s t i f y " : Justifies cell contents in the middle (not widely 
supported). 

• a 1 i g n = " c h a r " : Aligns cell contents around a specific character 
(not widely supported). 

The following example aligns a table in the center of the page (see 
Figure 11-9): 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http://www.w3 . org/TR/xhtml 1/ DTD/xhtml 1-transitional . dtd " > 
<html xml ns="http: //www. w3.org/1999/xhtml "> 

<head> 

<title>Tables</title> 
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</head> 
<body> 

border="l" width="630" al ign="center"> 

width="630" col span="2"> contents </td> 
</tr> 
<tr> 

<td width="400"> contents </td> 
<td width="230"> contents </td> 
</tr> 
</table> 
</body> 
</html> 




3 Figure 1 1-8 - Microsoft Internet Exploi 
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Vertical alignment 

You can vertically align cell contents by using the va 1 i gn attribute. It can 
only be used with the <tr> (cell) and <td> (row) elements. 

The possible values are 

v a 1 i g n = " t o p " : Vertically aligns cell contents to the top of the cell. 

*>*valign = " bottom": Vertically aligns cell contents to the bottom of the 
cell. 



Chapter 11: Using Tables for Stunning Pages 



201 



DropBooks 



v 0 v a 1 i g n = " mi d d 1 e " : Vertically centers the cell contents . (This is the 
default.) 



i g n = " b a s e 1 i n e " : Defines a baseline for all other cells in the same 
so alignment is the same for all cells. 





You can also use the align and va 1 i gn attributes with the following table 
elements: <col >, <col group>, <tbody>, <tf oot>, <th>, and <thead>. 

If you set the alignment for a row (<tr>) and then set the alignment for a cell 
within that row (<td>), the setting you add to the cell overrides the setting 
for the row. 

You are now used to learning that most X(HTML) formatting attributes are 
deprecated in favor of using CSS, and although the align attribute is depre- 
cated for most (X)HTML elements, it is still allowed when used with the table 
elements. 

You can't use the val i gn attribute with the <tabl e> tag. 
Using CSS to define alignment 

To control table alignment by using CSS, you have access to two properties: 
text a 1 i gn and vertical-align. They function just as the preceding 
align and val i gn attributes. 

To use the text - align property, you can assign it one of the following values: 



v 0 right: Aligns the table or cell contents against the right side. 

1 eft: Aligns the table or cell contents against the left side. (This is the 
default.) 

V center: Centers the table or cell contents, 
f" j usti fy: Justifies cell contents in the middle. 



To use the vertical-align property, you can assign it one of the following 
values: 




V top: Vertically aligns cell contents to the top of the cell. 

i>* bottom: Vertically aligns cell contents to the bottom of the cell. 

V mi ddl e: Vertically centers the cell contents. (This is the default.) 

base! i ne: Defines a baseline for all other cells in the same row, so align- 
ment is the same for all cells. 



You can control the alignment of an entire row by assigning alignment proper- 
ties to the <tr> element. 
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You can't center a table by using the text - a 1 i gn property — it's only for 
text alignment. Currently, you have a few options for centering the entire 
^^t*^§ ne of them is ideal, but they all work: 

W Use the deprecated <center> tags around the table. 

Use the deprecated align attribute within the table: <tabl e 
al ign="center">. 

i>* Enclose the table in a <di v> element and use the text-align property 
to center its contents: di v .my tab! e {text-align: center;). 



Adding Spans 





Spanning is one of the main reasons tables are a flexible alternative for 
arranging elements in your Web page. 

Spanning enables you to stretch items across multiple cells; you essentially 
tear down a cell wall. Whether you need to span rows or columns, you can use 
the concept of spanning to wrangle your table into almost any arrangement. 

Column and row spanning takes careful planning. That planning should occur 
during the sketching phase (as we describe earlier in this chapter, in the sec- 
tion "Sketching Your Table"). 

To span cells, you add one of these attributes to the <td> (cell) element: 

col span extends a cell horizontally (across multiple columns). 
rowspan extends a cell vertically (across multiple rows). 

Spanning cells can be done only by using (X)HTML attributes; CSS doesn't 
provide equivalent functionality. 



Column spans 

To span columns, you use the col span attribute in the <td> element and set 
the value equal to the number of cells you want to span. 



Figure 11-10 illustrates a cell that spans two columns. 
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The cell 
spans two 
columns. 
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In this example, the first cell spans the two cells in the next row. You use the 
col span attribute set to 2, as shown in the following markup, because the 
cell spans two columns: 

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http://www.w3.org/TR/xhtml 1/ DTD/xhtml 1 -transi ti onal . d t d " > 
<html xml ns="http: //www. w3.org/1999/xhtml "> 

<head> 

<title>Tables</title> 

</head> 
<body> 

<table border="l" width="630"> 

<tr> 

<td width="630" colspan="2"> contents </td> 
</tr> 
<tr> 

<td width="400"> contents </td> 
<td width="230"> contents </td> 
</tr> 

</table> 
</body> 
</html> 



Part III: Taking Precise Control Over Web Pages 



After you add a col span attribute 



• I f\ fafMS^y that you have the appropriate number of <td> cells in the first 
_ ' \J I V»3! For example, if you define a cell to span two columns, you should 
have one less <td> in that row. If you use col span = "3", there should 
be two fewer <td> cells in that row. 

Make sure that the other rows have the appropriate number of <td> 
cells. For example, if you define a cell to span two columns, the other 
rows in that table should have two <td> cells to fill out the two columns. 



Row spans 



You use the rowspan attribute with the <td> tag. Figure 11-11 illustrates a cell 
that spans two rows. 

To span rows, you use the rowspan attribute in the <td> element and set the 
value equal to the number of cells you want to span. 

Sketch your table first so you know which cells should span which columns 
and rows. The example design we use throughout most of this chapter uses 
the col span attribute with the first cell. However, the design could have 
been just as simple if we used a rowspan with the last cell that contains the 
navigational items. Either way, the table is efficiently laid out. 
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The modified table comes from the following markup (note the bold 

rowspan): 

E html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 
ttp: //www.w3 . or g /TR/xhtml 1 /DTD/xhtml 1-transitional . dtd " > 
<html xml ns="http: //www. w3.org/1999/xhtml "> 

<head> 

<title>Tables</title> 
</head> 
<body> 

<table border="l" width="630"> 

<tr> 

<td width="400"> contents </td> 

<td width="230" rowspan="2"> contents </td> 
</tr> 
<tr> 

<td width="630"> contents </td> 
</tr> 
</table> 
</body> 
</html> 



Populating Table Celts 

After you sketch your table and define table properties (such as width, cell 
padding and spacing, and cell spanning), you're ready to populate the table 
cells with images, hyperlinks, text, and almost any other (X)HTML element. 
This is a simple process: You add images, hyperlinks, and text to the <td> 
element, similar to how you add them to the <body> element. 



The following markup shows a populated table, with data added in bold: 



< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 


"http: //www. w3.org/TR/xhtmll /DTD/xhtml 1-transitional 


.dtd"> 


<html xml ns=" http: //www. w3.org/1999/xhtml "> 




<head> 




<title>Tables</title> 




</head> 




<body> 




<table border="l" width="630" al i gn="center" cellpadding= 


"5" eel 1 spaci ng="5"> 


<tr> 




<td col span="2" va 1 i gn=" bottom" align="leTt"> 




<a h ref=" http: //www. ropeadope.com"> 




<img src="images/ropeAdopeRecords.gif" width="249" 


height="94" 


alt="rope-a-dope records" border="0" /> 




</a> 
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</td> 



v a 1 i g n = " t o p " align="right" width="400"> 

mg src="images/gunlogo.gif" width="400" height="302" al t="rope-a-dope 
home" border="0" /> 

</td> 

<td v a 1 i g n = " t o p " align="left" width="230"> 
<br /Xbr /Xbr /> 
<img src="images/bands .gif "> 
<br> 

<a href="q/"> 

<img src="images/q.gif " border="0" /> 
</a> 
<br /> 

<a href="ilovemyself/"> 

<img src="images/ilovemyself .gif" border="0" /> 
</a> 
<br /> 

<a href="http://www. pwolf.com"> 

<img src="images/prescottCurlywolf .gif " border="0" /> 
</a> 

<br /Xbr /> 

<img src="images/organizations.gif" /> 
<br /> 

<a href="http://www.anthropos .org"> 

<img src="images/anthropos.gif" border="0" /> 
</a> 

<br /Xbr /> 

<img src="images/distractions.gif" /> 
<br /> 

<a href="darth/"> 

<img src="images/hubbabubba.gif" border="0" /> 
</a> 
<br /> 

</td> 
</tr> 
</table> 
</body> 
</html> 



DropBooKS 



Testing \lour Table 

Testing is the final step before your table goes live. You must test your tables 
in all the popular browsers — including Internet Explorer, Netscape, and 
Opera. If you don't, your users might have to squint at your pages, or they 
might see your tables as one big mess. 
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\\V ^ As y° u re creating your table, have your browser window open at the same 
time. Each time you change the width of a cell or add an item to a cell, save 
anient and view it in the browser window. That way, when you test 
)e, you probably won't have too much tweaking to do. 
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A challenge for many designers is to create table designs that work in every 
browser. Thanks to many crusaders of standards, the newest versions of the 
most popular browsers, Netscape, Internet Explorer, and Opera, all support 
the HTML standard. If your audience isn't technically savvy, consider older 
browsers when designing your tables. 

gp^SER Always test your site in any browser that your users might have. For exam- 
ple, if your table is aligned with al i g n = " center" but in an old version of 
Internet Explorer the table remains flush with the left side, you might have to 
add a<center> tag pair to your table. However, you won't have too many 
problems with tables if you stick to the standard. 




Table-Making Tips 

We've spent years of building, maintaining, and troubleshooting tables, and in 
that time we've discovered some neat tricks. The following tips are a head 
start to creating effective tables. 

Fottouring the standards 

The first — and (we think) most important — tip is to keep with the estab- 
lished standards. The folks involved with the Web Standards Project have 
campaigned for full standard support in browsers and HTML authoring appli- 
cations since 1998. Their hard work should make your life easier. 

Just a couple of years ago, if you built an HTML table, you would be forced to 
create different versions of your Web page (each version containing browser- 
specific elements and attributes) to define some basic table properties. As 
you might imagine, creating and maintaining different versions of the same 
Web page can drive development costs sky-high. To get around those costs, 
many developers would carefully craft their tables with specific markup that 
worked in Internet Explorer and Netscape — but what about Opera? Well, hap- 
pily those are problems of the past. The newest versions of Internet Explorer, 
Netscape, and Opera all support HTML, as well as CSS and XHTML. To find out 
more about the fight for Web standards, visit www . webstandards .org. 
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Sanitizing markup 

written markup is easier to troubleshoot and maintain. Many 
use white space to separate elements. For example, the following 
markup doesn't use much white space and is hard to read: 
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<table border="l" width="630"> 
<tr><td width="630" col span="2"> contents </td></tr> 
<tr><td width="400"> contents </td> 
<td width="230"> contents </td></tr></tabl e> 



Check out this clean version: 



<table border="l" width="630"> 

<tr> 

<td width="630" col span="2"> contents </td> 
</tr> 
<tr> 

<td width="400"> contents </td> 
<td width="230"> contents </td> 
</tr> 
</table> 




The white space we include in our markup is between elements; not within 
elements. If, for example, you add white space between the <td> and </td> 
tags, it affects how the cell's content is displayed, which isn't generally some- 
thing you want to do. 



Nesting tables u/ithin tables 

Many designers are forced to nest tables within tables to achieve a desired 
effect. This is both lesal and common. 




A few nested tables won't affect your users too badly. But nesting many 
tables within tables can lengthen download time. 



To nest a table, simply add the <tabl e> element within a <td> element as 
follows: 



<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http: //www. w3.org/TR/xhtml 1/ DTD/xhtml 1-transitional . d t d " > 
<html xml ns="http: //www. w3.org/1999/xhtml "> 

<head> 

<ti tl e>Nesti ng Tabl es</ti tl e> 
</head> 
<body> 

<table border="l"> 
<tr> 
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<td> 



<td> contents </td> 
<td> contents </td> 



<table border="l"> 
<tr> 

<td> contents </td> 
<td> contents </td> 
</tr> 
<tr> 

<td> contents </td> 
<td> contents </td> 
</tr> 
</table> 

</td> 

<td> contents </td> 
</tr> 
</table> 

</body> 
</html > 

This markup produces the tables shown in Figure 11-12. 



'3 Figure 1 1-14 - Microsoft Internet Explor 



Figure 11-12: 

Nested 
tables. 
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When using nested tables 
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;ck cell widths — the width of the third cell should match the width 
Be nested table. 



V Create and test the table you intend to nest — separately, before you add 
it to your primary table. 



We recommend creativity, but be careful and don't pack a screen full of dense 
and impenetrable information — especially numbers. A long, unbroken list of 
numbers quickly drives away all but the truly masochistic — pretty much 
negating the purpose of the table to begin with. Put those numbers into an 
attractive table (better yet, several tables interspersed with a few well-chosen 
images). Watch your page's attractiveness and readability soar; hear visitors 
sigh with relief. 

Individual table cells can be surprisingly roomy. You can position graphics in 
them precisely. If you're moved to put graphics in a table, be sure to 

Select images that are similar in size and looks. 

Measure those images to determine their heights and widths in pixels. 
(Shareware programs such as Paint Shop Pro and GraphicConverter do 
this automatically.) 

V Use HTML markup to position these images within their table cells. 

A short-and-sweet table keeps the graphics in check and guarantees that the 
text always sits nicely to its right. 

Two more handy graphics-placement tips produce a consistent, coherent 
image layout: 

Size your rows and columns of cells that contain images to accommo- 
date the largest graphic. 

V Center all graphics in each cell (both vertically and horizontally). 



Avoiding dense tables 



Adding color to table cells 



You can use either CSS or (X)HTML to change the background color of a cell 
or table. Before CSS was around, designers used the bgcolor attribute to 
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<td bgco 



change the background of table cells in much the same way it affects the 
background of an entire HTML document. Simply add the bgcolor attribute 
ble cell to change its background color: 




lor="teal">...</td> 

However, now you have a bit more flexibility to use the background property 
to add some color: 

td (background: red;) 

We cover the background property in Chapter 10. 

The bgcol or attribute may be used with any of the table elements. However, 
the bgcolor of a cell overrides any bgcolor defined for a row or table. Note 
that bgcol or is also deprecated, and that most Web experts use CSS markup 
instead. 



Marvelous Miscellany 

Table 11-1 lists other table-related (X)HTML attributes that you might find in 
HTML files. 



Table 11-1 


Additional 


Table-related (X)HTML Attributes 


Name 


Function/ 
Value Equals 


Value 
Types 


Related 
Elements) 


abbr 


Abbreviates table 
header 


Text 


<td><th> 


axi s 


Sets a comma- 
separated list of 
related table headers 


CDATA 


<td><th> 








char 


Defines alignment 
character for table 
elements 


ISO 10646 char 


<col /><colgroup> 

<tbody><td><tfoot> 

<th><thead><tr> 


charoff 


Defines offset when 

alignmentcharis 

used 


Length (p/%) 


<col /><colgroup> 

<tbody><tdXtfoot> 

<th><thead><tr> 



(continued) 
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frame 



Function/ 
Value Equals 



Value 
Types 



Related 
Element(s) 



Identifies visible 
components in a 
table structure 



{"above"|"bel ow"| 
"border"|"box"| 
"hsides"|"l hs"|"rhs"| 
"void"|"vsides"} 



<table> 



rules Governs the display of {"all"| 
rule bars in a table "cols"| 
"groups' 
"none "| 
"rows"} 



<table> 



scope Describes scope for {"col " | <td><th> 





table header cells 


"col group" 
"row" 

" rowgroup"} 






summary 


Describes a table's 
purpose 


Text 


<table> 


span 


Sets the number of 


Number 


<co 


1 /> 



table columns to which 
col attributes apply 
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By Rich Tennan 




See? I created a little felon figure tV\at 
vuns anwnd our "Web site hiding behind 
banner ads . On -the last page, our logo 

puts him in a non lethal chcfce hold 
and bvings him back to the home page." 
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In this part . . . 



In this part of the book, we introduce and describe the 
types of scripting languages that work on Web pages, 
and we dig into JavaScript — by far the most popular of 
all Web scripting languages in use today. Scripting lan- 
guages help turn static, unchanging Web pages into active, 
dynamic documents that can solicit and respond to user 
input. You start by learning basic JavaScript elements, 
data types, and values, and progress to topics that include 
rearranging Web page contents on the fly, performing cal- 
culations and displaying their results, requesting and 
checking user input, and a whole bunch more. 



Next, you dig more deeply into JavaScript so that you can 
understand — and use — this scripting language in your 
Web pages. You also learn how to incorporate JavaScript 
into Web pages and how it handles and changes Web page 
contents on the fly. You also learn about checking your 
work and using cookies (those interesting but elusive data 
packages that adhere to Web users). 

The final three chapters in this part show you ways to put 
JavaScript to work in your Web pages. You explore how to 
define and use a navigation bar, which presents users with 
dynamic menus of options and information to make it 
easier for them to move around your Web site. You learn 
how to use JavaScript to create and use various data- 
entry forms in your Web pages to solicit, check, and 
respond to user input. You also learn the basic concepts 
and techniques for creating dynamic HTML (sometimes 
called DHTML) and using client-side JavaScripts and pre- 
fabricated code to perform basic tasks, such as displaying 
date and time information, counting site visitors, or tabu- 
lating current statistics. 



Chapter 12 

Icripting Web Pages 



In This Chapter 

Understanding what JavaScript is 

Exploring what JavaScript can do for your Web pages 

Dissecting three sample scripts 



■ M /hen used in conjunction with your HTML markup, scripts — small 
▼ W programs that you add to your Web page — help your Web pages 
respond to user actions. Scripts create the interactive and dynamic effects 
you see on the Web, such as images that automatically change when visitors 
move mouse pointers over them, additional browser windows that pop up 
when a page loads, and animated navigation bars. 

Because scripts are mini-programs, they're often written in a programming 
language called JavaScript. If you are unfamiliar with the term, JavaScript 
may sound like a Hollywood screenplay doused with coffee. However, it is 
actually a scripting language built right into all the popular Web browsers. 

Fortunately, because of the Nobel prize-worthy invention of "copy and 
paste," you don't need to be a technoguru to add scripting to your Web sites. 
The Web has many sites that feature canned JavaScript scripts that you can 
freely copy and then paste right into your Web page. (Chapter 13 lists several 
of the best JavaScript sites.) 

In this chapter, you explore how scripting works inside your Web page by dis- 
secting three sample scripts written in JavaScript. Chapter 13 continues this 
discussion by diving deeper into the JavaScript language itself. 

Many good Web-page editors (such as Macromedia Dreamweaver and Adobe 
GoLive) have built-in tools to help you create scripts — even if you don't 
know anything about programming. 
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JavaScript is not Java 



Driginators of the JavaScript 
scripting language wanted to ride the coattails of 
the massive popularity of the Java programming 
language, so they gave it a catchy name — 
JavaScript. However, when they made this deci- 
sion, they also introduced a lot of confusion given 
the similarity of the two names. To clarify, the full- 
featured Java programming language isn't a 
scripting language on the Web. Java is a descen- 
ded of the C and C++ programming languages. 
Programmers can create Java applications that 



can run on Windows, Macintosh, Linux, and other 
computer platforms: 

On the client side, Java is used to create 
app/efs (small programs that download over 
the Net and run inside Web browsers). 
Because Java is designed to be cross- 
platform, these applets should run identi- 
cally on any Java-enabled browser. 

On the server side, Java is used to create 
many Web-based applications. 



What JavaScript Cart bo for \lour Pages 

Adding scripts to your Web site is much like those makeover reality televi- 
sion shows that transform a house or a person's appearance into something 
completely new and wonderful. So too with JavaScript. You can transform a 
plain and dull Web page into an interactive and dynamic Web extravaganza 
that will give your visitors joy and enjoyment for years to come. Okay, maybe 
we're exaggerating just a little bit, but you get the point. 

For example, if you visit Dummies.com (www . dummi es .com) and click the 
red button next to the search box without entering a term to search on, the 
browser displays a nice warning box that reminds you to enter a search 
term before you actually search, as shown in Figure 12-1. 



S] 



Figure 12-1: 

A script 
pops up a 
dialog box 
telling you 
what you 
did wrong. 
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Microsoft Internet Explorer 



Please enter a search term 
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A short script verifies whether you've entered a search term before the 
engine runs the query: 



u enter a search term, you don't see the warning. 

**" If you don't enter a search term, the script built into the page prompts 
the warning dialog box to appear. 

This bit of scripting makes the page dynamic, which means that it adds pro- 
grammatic functionality to your Web pages and allows them to respond to 
what users do on the page — for example, filling out a form or moving the 
mouse pointer over an image. When you add scripts to your page, the page 
interacts with users and changes its display or its behavior in response to 
what users do. 




The page URL doesn't change and another browser window doesn't open 
when you try to search on nothing. The page responds to what you do with- 
out sending a request back to the Web server for new page. This is why the 
page is considered dynamic. 



If you tried this trick without using a script (that is, without the dynamic func- 
tionality), the browser would send the empty search string back to the Web 
server. Then the server would return a separate warning page reminding the 
user to enter a search term. All the work would be done on the Web server 
instead of in the Web browser. This would be slower (because the request 
must first go to the server, and then the server must transmit the warning 
page back to your browser), and would feel much less fluid to the user. It's 
much better to just click a button on the page and instantly have an alert 
pop up to help the user. 

In the following sections, we showcase three common ways in which 
JavaScript can be used in your Web pages. 




Don't worry about the details of the JavaScript code in the following exam- 
ples. Just focus on how JavaScript scripts can be pasted into your Web page 
and work alongside your HTML markup. 



Arrange content dynamically 

JavaScript can be used with CSS (covered in Chapters 8 and 9) to change the 
look of the content on a page in response to a user action. Here is an example: 
Two authors share a Weblog, Backup Brain (www .backupbrain. com). One of 
the authors prefers small, sans-serif type, and the other one finds it easier to 
read larger, serif type. So the Weblog has buttons that change the look of the 
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site to match each person's preference. Of course, the site's visitors can use 
the buttons to switch the look of the type, too, and the site remembers the visi- 
ce for future visits by setting a cookie, which is a small preference file 
the user's computer. Figure 12-2 shows the two looks for the page. 



Figure 12-2: 

Clicking the 
"Change 
your font" 
buttons 
changes 
how the text 
displays. 
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JavaScript and CSS can create this effect by switching between two style 
sheets: 

If* The sans-serif style sheet, sansStyl e . ess 
V* The serif style sheet, serifStyle.css 

Listing 12-1 shows the source code of an example page that contains this 
switching mechanism. 

W When a user clicks the Sm Sans button on the page, the sty 1 eSwi tcher . 
j s script referenced in the <head> element runs and switches the active 
style sheet to sansStyl e . ess. (Chapter 13 covers .js files.) 

*<" When the user clicks the Lg Serif button, the same script switches to the 
sen' f Styl e . ess style sheet. 



Listing 1 2-1 : Style Switching 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http://www.w3 . org/TR/xhtml 1/ DTD/xhtml 1-transitional . dtd " > 
<html xml ns="http: //www. w3.org/1999/xhtml "> 
<head> 

<title>Style Changer</ti tl e> 

<link href =" s i mpl eStyl e . ess " rel = "stylesheet" rev=" styl esheet" /> 
< 1 ink href="sansStyle.css" rel="stylesheet" rev="styl esheet" 

title="default" /> 
< 1 ink href="serifStyle.css" rel="alternate stylesheet" 

rev="alternate stylesheet" title="serif " /> 
<style type="text/css" medi a="all ">@import "complexStyle.css" ; </ styl e> 
<script src="styleSwitcher. js" language="javascriptl.5" 
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type="text/javascript"X/script> 

<ihead> 

\|\^3ss="navBar"> 

<br />Change your font: 
<form acti on="none"> 

<i nput type="button" cl ass="typeBtn" value="Sm Sans" 

oncl ick="setActi veStyl esheet( 'default' )" /> 
<i nput type="button" cl ass="typeBtn2" val ue=" Lg Serif" 
onclick="setActiveStylesheet( 'serif )" /> 

</form> 
</div> 




<div cl ass="content" id="headContent"> 

<p>Repl ace this paragraph with your own content. </p> 

</div> 

</body> 

</html> 



You can see the example page for yourself at 






www. javascri ptworld . com/scri pts/chapl6/ex6/i ndi 


;x.h 


tml 




This example relies on several different files (HTML, CSS, and JavaScript). 
You can see the full listing for all of the files at 


www.javascriptworld.c 


:om/scripts /script 16. 06. html 






Work tilth browser Windows 

JavaScript can tell your browser to open and close windows. 

You've probably seen the annoying version of this trick: advertising pop-up 
windows that appear when you try to leave a site. 

But this technology can be used for good as well as evil. For example, you 
can preview a set of big image files with small thumbnail versions. Clicking a 
thumbnail image can perform such actions as 

I Opening a window with a larger version of the image. 

Opening a page with a text link that opens a window with an illustration 
of that text, as shown in Figure 12-3. 

The code required to do this sort of pop-up window is fairly straightforward, 
as Listing 12-2 shows. 
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Figure 12-3: 

When you 
clickthe 
link, a pop- 
up window 
appears 
with a 
picture in it. 
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Pixel 
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A Internet 



Listing 12-2: Pop-up Windows 






<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http://www.w3.org/TR/xhtml 1/ DTD/xhtml 1 -transi ti onal . d t d " > 
<html xml ns="http: //www. w3.org/1999/xhtml "> 
<head> 

<ti tl e>Openi ng a Window</title> 

<script 1 anguage="Javascri pt" type="text/javascri pt"> 





function newWindowt ) { 

catWindow = window. open( "images/pixel 2.jpg" , "catWin", 
"width=330,height=250") 

} 

</script> 
</head> 

<body bgcol or="#FFFFFF"> 

<hl>The Master of the House</hl> 

<h2>Click on His name to behold He Who Must Be Adored<br /Xbr /> 

<a href ="j a vascri pt : newWindowt )">PixeK/aX/h2> 
</body> 
</html> 




Pop-up windows can backfire on you if you use them too much. Many Web 
sites use pop-up windows to deliver ads, so users are becoming desensitized 
(or hostile) to them and simply ignore them (or install software that prevents 
them). Before you add a pop-up window to your site, be sure it's absolutely 
necessary. 



Chapter 13 has more details on creating pop-up windows with JavaScript. 
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Solicit and Verify user input 




n use for JavaScript is to verify that users have filled out all the 
feQuTfeCTfields in a form before the browser actually submits the form to 
the form-processing program on the Web server. Listing 12-3 places a form- 
checking function, checkSubmit,in the < s c r i p t > element of the HTML page 
and references it in the onsubmi t attribute of the <f orm> element. 



Listing 1 2-3: Form Validation 

< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http://www.w3.org/TR/xhtml 1/ DTD/xhtml 1 -transi ti onal . d t d " > 
<html xml ns="http: //www. w3.org/1999/xhtml "> 

<head> 

<ti tl e> Li nki ng scripts to HTML pa ges </t i tl e> 
<script type="text/javascript" language="javascript"> 
function checkSubmit C thisForm ) { 
if ( thisForm. FirstName. value ==''){ 

alert( 'Please enter your First Name.'); 
return false; 

} 

if C thisForm. LastName. value ==''){ 

alert( 'Please enter your Last Name.'); 
return false; 

} 

return true; 

} 

</script> 

</head> 

<body> 

<form method="P0ST" action="/cgi-bin/form_processor.cgi" 
onsubmi t=" return checkSubmit (this) ; "> 

<P> 

First Name: <input type="text" name=°Fi rstName" /Xbr /> 
Last Name: <input type="text" name="LastName" /Xbr /> 
<input type="submit" /> 

</p> 
</form> 

</body> 
</html> 

This script performs one of two operations if either form field isn't filled in 
when the user clicks the Submit button: 

It instructs the browser to display a warning to let the user know he or 
she forgot to fill in a field. 

f* It returns a value of fa 1 se to the browser, which prevents the browser 
from actually submitting the form to the form-processing application. 
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Server-side scripting 



JavaScript is a scripting language that runs 
inside the browser, but there are other scripting 
languages that run on the server side, such as 
Perl, ASP (Active Server Pages), PHP, Python, 
.NET, ColdFusion, and others. The programs 
written in these languages reside on the server 
and are called by the Web page, usually in 
response to a form filled out by the user. People 
who write these Web pages may include small 
snippets of code that pass bits of information 
from the HTML page to the program on the 



server. When called, the program runs andthen 
returns a result of some sort to the user. 

Amazon.com is a familiar e-commerce Web 
application that runs mostly on the server side 
using server scripts. Therefore, the Web pages 
that are displayed by the browser when you visit 
Amazon are the results of processing by server- 
side scripts that takes place before the page 
ever gets to your browser. 



If the fields are filled in correctly, the browser doesn't display alerts and 
returns a value of true, which tells the browser that the form is ready to pass 
on to the Web server. Figure 12-4 shows how the browser displays the alert if 
the first name field is empty. 



Figure 12-4: 

A good 
use of 
JavaScript 
is to validate 
form data. 
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Address C: documents and Settings\Tom NegrinoV3esktop\farrn,htrnl 



a g„ 



First Name: 



Last Name Smith 



Microsoft Internet Explorer 



Submit Query 



Please enter your First Name. 



■£]Done 



Although this example only verifies whether users filled out the form fields, 
you can create more advanced scripts that check for specific data formats 
(such as @ signs in e-mail addresses and only numbers in phone number 
fields). 
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When you create forms that include required fields, we recommend that you 
always include JavaScript field validation to catch missing data before the 
even find its way back to the server. Visitors get frustrated when 
: the time to fill out a form only to be told to click the Back button in 
their browsers to provide missing information. When you use JavaScript, the 
script catches any missing information before the form page disappears so 
users can quickly make changes and try to submit again. 
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But Wait . . . there's more! 

You can do much more with JavaScript. The following list highlights several 
common uses of the scripting language: 

V Detect whether a user has a browser plug-in installed that handles multi- 
media content 

Build slide shows of images 

Automatically redirect the user to a different Web page 

Add conditional logic to your page, so that if the user performs a certain 
action, other actions are triggered 

V Create, position, and scroll new browser windows 

Create navigation bars and change the menus on those bars dynamically 
j>* Automatically put the current date and time on your page 
Combine JavaScript and CSS to animate page elements 

One of the more innovative uses of JavaScript is in Gmail, the free Web-based 
e-mail service from Google, which you can find at www . gmai 1 . com. Gmail 
uses JavaScript to load an entire e-mail user interface into the user's browser, 
which makes Gmail much more responsive to user actions than most other 
Web-based mail programs. Gmail uses JavaScript to keep the number of times 
the page needs to fetch additional information from the Gmail servers to an 
absolute minimum. By doing much of the processing in the user's browser, 
the Gmail Web application feels much more like an e-mail program that you 
run on your computer. Figure 12-5 shows the JavaScript-powered Gmail inter- 
face. It's a great example of the power of JavaScript. 
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Figure 12-5: 

The Gmail 
interface is 
powered by 
JavaScript. 
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Gm oil 



Invite 6 friends to Gmail | Settings | Hel£ | Sia 
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Sent Mail 
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Spam (214) 

Contacts 
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AHTV 1331 
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Search the Web 



Archive | | Report Spam | 




Refresh 1 - 100 of 410 Older 


2 Oldest » 


Select: All Read Unread Starred 


More Actions 
Mark as read 






□ 


Travelzoo 


r ZIP Update + Chance for 2 


12:48pm 


□ 


Netflix Receiving 


Add star ^ 


eived: Mystic River - You hav... 


8:13am 


□ 


Apple Developer C. (2, 


Remove star 
Move to Trash 


eloper Connection year in r 


3:23am 


□ 


Marie Bevins 


S Eve. ...Italian Style 


Dec 28 




Adam C. Engst 


Apply label 


s 1.1.3 update is out - At 9 0... 


Dec 28 


□ 


laurie schaeffer 


AHTV 

Contribute 2004 


s Eve Cajun Dance and Pea 


Dec 28 




Lorene Romero (2) 


Personal 


use - Thanks babe > From: To... 


Dec 28 


□ 


cbp owner 


Tco Entourage Ord 
New label 


( digest (1 messages) - The m... 


Dec 28 


□ 


list-authors-only-own. 
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PayPal Electronic Funds Transfer - Dear T... 
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□ 


John Smith 


Chap, 14 questions - Ed - I'm working on... 


Dec 27 


□ 


orders 


Your L.L.Bean Order (might contain gi 


Dec 27 
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In This Chapter 

Putting scripts in your pages 
Using external script pages 
Delving into the JavaScript language 
Where to learn more 



I\ lot of good "canned JavaScript" is available for free on the Web; you 
v \ know what we mean — scripts written by someone else that you simply 
copy and paste into your HTML page. But, as good as canned scripts can be, 
copy-and-paste goes only so far. Sooner or later, you are going to encounter 
unique needs that can't be fulfilled with a free script. 

Canned JavaScript is much like canned SPAM: Great for convenience, but you 
probably don't want to live on an exclusive diet of it. Instead, knowing how to 
script — or at least how to tweak a prewritten script — is as important as 
knowing how to fix some good oY fashioned home cooking. 

In this chapter, you "open the can" of the JavaScript language and have a look 
at what's inside. (Don't worry; you won't encounter any pink meaty substances 
along the way.) You discover how to plug scripts into your pages, how to 
bundle your scripts into external JavaScript files to save time and effort, and 
how the nuts and bolts of the JavaScript language work. Finally, at the end of 
this chapter, we point you to good sources of additional information about 
JavaScript. These will come in handy as your scripting needs grow more 
advanced. 



Including Scripts in Web Paqes 



Because a JavaScript script is a totally separate animal from HTML markup, 
you have to contain this JavaScript beast inside an HTML container tag, 
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<scri pt> and </scri pt>. You can put a script in one of two places on an 
HTML page: 



i>* Within the <body> and </body> tags (this is called a body script) 

Header scripts contain code that you either want to be processed before the 
page loads or else want to have available to be called by other scripts in your 
Web page. Body scripts are executed when the <body> tag is processed. 
Typically body scripts are used to generate HTML content for the page. 

Listing 13-1 shows an example of a header script. This simple script pops up 
a welcoming message box when the user loads the page. 

Listing 13-1: Header Script 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http://www.w3.org/TR/xhtml 1/ DTD/xhtml 1 -transi ti onal . d t d " > 
<html xmlns="http://www. w3.org/1999/xhtml "> 

<head> 

<title>My JavaScript page</title> 
<script language="Javascript" type="text/javascript"> 

alertC'Welcome to my JavaScript page!") 
</script> 

</head> 

<body bgcol or="#FFFFFF"> 

<h2>This script pops up a message box Tor the user.</h2> 

</body> 
</html> 

The preceding <scri pt> tag has two attributes: 

V language=" Javascript" tells the browser which scripting language 
the document uses. 

I j>* type="text/ ja vascri pt" tells the browser that the script is plain text 
in JavaScript. 

The script itself, al ert( "Wei come to my JavaScript page !"), is straight- 
forward. The a 1 e r t ( ) method displays a message box that pops up on top of 
the browser window and shows a customized message to the Web page visi- 
tor. You specify the message you want displayed by enclosing the text within 
quotation marks and putting the text string inside the a 1 e rt ( ) method's 
parentheses, as shown in Listing 13-1. (Note: Curly quotes and single quotes 
won't work.) Make sure you close the script with the </script> tag, and 
your script is ready to go. 




in the <head> and </head> tags (this is called a header script) 
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Using the Same Script on Multiple Pages 



J/J<\5^e a single Web page that uses a JavaScript script, it's handy to be 
able to contain all of the scripting code inside a single <scri pt> tag. 
However, suppose you have a boatload of pages, each of which needs to call 
the same script. You can always copy and paste the script into each page, but 
there are two downsides to that approach. First, you have to add the script to 
each page and make sure it is set up correctly and working. Second, anytime 
you make any tweaks to the script, you are forced to update each and every 
HTML page that uses it. If you have two pages, that's no big deal. But if you 
have more than three, it can lead to a maintenance migraine. 

However, this headache can be avoided — even without ibuprofen! Instead, 
you can use an external JavaScript file, also called a . j s file (pronounced 
"dot jay ess"). A . j s file is an ordinary text file that stores your JavaScript 
scripts. You can store one or more of your JavaScript scripts in a single . j s 
file and access them from multiple HTML pages. 

To use the same script on multiple pages, you should 

1. Put the script in an external JavaScript file. 

If you have the script already inside your HTML page, remove all the 
JavaScript code inside the <scri pt> tag and paste it into a separate file. 

2. Reference the file in any HTML page when you need the script. 

Define a<script> tag in the head section of your Web page, but don't 
add any code inside it. Instead, use the src (for source) attribute in the 
< s c r i pt > tag to call the external . j s file. 

Listing 13-2 shows the reference to the external file. 
Listing 13-2: External Script Reference 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http: //www.w3 . org/TR/xhtml 1/ DTD/xhtml 1 -transi ti onal . dtd " > 
<html xml ns="http: //www. w3.org/1999/xhtml "> 
<head> 

<title>My JavaScript page</title> 
<script src="external . js" 1 anguage="JavaScript" type="text/javascript"> 
</script> 

</head> 

(the rest of your HTML page goes here) 




You don't need to include anything between the opening and closing script 
tags. In Listing 13-2, the name of the source file, externa 1 . js, is placed 



228 Part IV: Integrating Scripts with HTML 



a i 

DropBo<3 



between double quotes. You can reference this file, external . js, with either 
a relative or absolute link, so you can refer to external JavaScript files in 

;ectories on your server, or even on other servers (if you have access 
ervers). 





Adding the s r c attribute to the < s c r i p t > tag tells the browser to look for 
that external file in the specified path. The resulting Web pages look and act 
like the scripts are in the header or body of the page's script tags, though the 
script is in the external . j s file. 

With this technique, you need to change a JavaScript only once on your site 
in the external file, not in each individual page on the site. All of the pages 
that reference the external file automatically receive the updated code. It's a 
big timesaver when updating your site. 

If you use a script on only one page, it's often easier simply to put the script 
on the page in a body or header script. 

If you have multiple external . j s files, you can use any or all of them on any 
HTML page. Just include multiple <scri pt> references on the page. It's per- 
fectly okay for a page to include multiple scripts and to both refer to external 
. j s files and include its own scripts inside <scri pt> tags. 

When you have multiple < s c r i p t > tags defined in your Web page, the browser 
processes them in the order in which they are declared. If, for some reason, 
you have an external . j s file that conflicts with a script inside a<scn'pt> tag, 
the last one defined wins. 

There is nothing magical about the inside of the . j s file itself — it is pure 
JavaScript code. No HTML tags are allowed. Listing 13-3 shows an example of 
a script in an external . j s file. This script implements button rollovers for a 
Web page. When the user moves the mouse pointer over a button image, the 
image changes to highlight the choice. 



Listing 13-3: An External JavaScript File 

homeOff = new Image 
productsOff = new Image 
contactOff = new Image 
pressOff = new Image 

homeOver = new Image 
productsOver = new Image 
contactOver = new Image 
pressOver = new Image 

homeOff.src = "images/home_off . jpg" 
productsOff .src = "images/products_off . jpg" 
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contactOff .src = "images/contact_off . jpg" 
pfessOff.src = "images/press_off . jpg" 



src = "images/home_over. jpg" 
productsOver . src = "images/products_over. jpg" 
contactOver.src = "images/contact_over. jpg" 
pressOver . src = "images/press_over. jpg" 

function imgOver(thisImg) ( 

document[thisImg].src = "images/" + thislmg + "_over.jpg" 



function i mgOut (this Img ) I 

document[thisImg] .src = "images/" + thislmg + "_off.jpg" 



Note that the contents of the . j s file shown in Listing 13-3 could be copied 
directly into a<script> tag and function identically. 



Exploring the JavaScript Lanquaqe 

If you travel to a country whose people don't speak your native tongue, you 
usually buy a pocket language guide to help you make your way through the 
country. You don't necessarily need to know all the particulars and idiosyn- 
crasies of the language, but you do need to know the essentials — phrases 
like "Where's the bathroom?" or "Where can I get an espresso?" — in order 
to survive. 

In the same way, if you want to work with JavaScript, you don't need to become 
a hotshot scripting guru. You do, however, need to know enough about the 
scripting language to do the programming equivalent of ordering a meal or 
asking where the bathroom is. 

Like any other programming language, JavaScript is made up of several com- 
ponents, including 

Basic syntax rules 
u* Commands, values, and variables 
V Operators and expressions 

Statements 
W Loops 
i>* Functions 
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I Arrays 

Object orientation 



ese is explored in the following sections. 



Basic syntax rules 



Every language has its own set of rules to make it possible to communicate. 
English, for example, uses periods to end sentences, quotation marks to 
denote quotes, and exclamation points to indicate something exciting is hap- 
pening! JavaScript is no exception. 

Below are some of the basic syntax rules that you should understand as you 
begin to discover what the scripting language is all about. 



Statements 

Just as an English or French document is composed of sentences, JavaScript 
scripts are composed of one or more statements. For example, the script in 
Listing 13-1 has a single statement, whereas the script in Listing 13-3 has over 
20. Statements can end simply by putting the next statement on the following 
line. You can also optionally end a statement with a semicolon. 



Capitalization 

JavaScript is a case-sensitive language. The text you type in a script must not 
only be spelled correctly but must also be in the correct case. For example, 
the a 1 ert ( ) method we use earlier in this chapter is in the correct syntax for 
that method. If we use A 1 e r t ( ) or A L E RT ( ) , the script won't work. 



White space 

JavaScript ignores spaces and tabs (usually called white space) between 
statements, but it's a good idea to use space to make your code more read- 
able. For example, the following two code examples function in the same way, 
but the first is much easier to read than the second. 



**" The following code separates and organizes statements with spaces and 
line breaks, so it is easy to read and understand: 

if (document. images) { 
arrowRed = new Image 
arrowBl ue = new Image 



arrowRed. src = "images/redArrow.gif " 
arrowBlue.src = "images/bl ueArrow.gif " 

} 
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v 0 The following code separates statements with semicolons and doesn't 
use spaces and line breaks for organization, so it's harder to read: 

(document. images) {arrowRed = new Image; arrowBlue = new Image; 
owRed.src ="images/redArrow.gif " ; arrowBlue. src = "images/ 
uiueArrow.gif"} 

Comments 

Comments are text within your script that's ignored by the browser when the 
script runs. Comments are invaluable help to 

Other people who are trying to figure out your code. 

You. Months after you write the script, comments can make the code 
much easier for you to change. 

Single-tine comments 

You can add comments to your JavaScript by adding two slashes to a com- 
ment that fits all on one line, like this: 

//The code that runs below displays a snazzy pop-up window 
Multiple-tine comments 

If your comment is lengthy and you need to span more than one line, you can 
either start each line with two slashes or else enclose your comments with 
/* and */ marks. 

/* The code that runs below displays a really nifty, snazzy, 
jazzy, wicked-cool pop-up window. 
Last modified: June 10, 2005 */ 



Variables and data types 

In JavaScript, you can execute various commands that are built into the lan- 
guage itself, such as a 1 e rt ( ) , shown in Listing 13-1. However, you often use 
commands to act on pieces of information, known as values. For example, 
a 1 e rt ( ) displays a string value that is contained within its parentheses. A 
value can be either a literal value (such as a number or a string of alphanu- 
meric characters) or a variable. Each value is categorized by its type. 

Variables 

A variable is a placeholder for a value. For example, the variable f avPerson 
contains the string value Gilligan. In JavaScript, you can write this as 

favPerson = "Gilligan". 
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The equals sign is read as "is set to." In other words, the variable f avPerson 
now contains the value "Gilligan." (The equals sign is an assignment operator, 
explained later in this chapter.) When assigning a value to a variable, 
ind the following rules: 



The variable name is always on the left side of the equals sign. 
The variable value is always on the right side. 



Here are examples of variables and the value that each contains: 



x = 5 

f i rst_Time = fal se 
formZipcode = "92683" 




In the preceding example, x contains the numeric value of 5. However, the 
f ormZi pcode variable contains a text string, not a number, because the 
string value is enclosed in double quotes. 

If you need to perform mathematical operations on a variable, assign a 
number value to it, not a quoted string. 

The actual act of creating a variable and assigning it a value is called declar- 
ing the variable. So, to declare the variable pi to be equal to 3 . 14, you write 
this: 



pi - 3.14 

When you declare a variable, remember that 
JavaScript is case-sensitive. 

myname, MyName, and myName are treated as three separate variables 
because they each have different capitalization. 

t<" Variable names can use only letters, numbers, and underscores. 

They can't contain spaces or other punctuation. 

Variable names can't start with a number. 

Variable names can't be the same as a reserved word. 

Reserved words are special keywords, such as i f or wi th, that are used 
by JavaScript for its core functionality. Make sure you avoid naming a 
variable the same as one of these words. A complete list of reserved 
words is available at www .javascripter.net/faq / reserved, htm. 



Data types 

When you work with a literal value or variable, JavaScript categorizes it as a 
particular data type. Table 13-1 shows the common types of values. 
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Table 13-1 


Data Types 






Description 


Example 


TMumBer 


Any numeric value 


42 


String 


Text characters inside quote marks 


"My name is 
Inigo Montoya" 


Object 


A JavaScript object, which can be 
defined by the language or else 
created on your own 


wi ndow 


Function 


Value returned by a function 


myFunction( ) 


Boolean 


Atrue orfalse value 


true 


Null 


Empty; has no value 


null 



Operating on expressions 

As the preceding sections discuss, a literal value (such as 5 and " Li ghtbul b") 
or a variable can represent a value of a particular type. However, in JavaScript, 



a complete statement, called an expression, can also return a value 
pie, consider the following two expressions: 


For exam- 


2+1+2 

"A" + "three" + "hour" + "tour" 




// Evaluates to a value of 5 
// Evaluates to "Athreehourtour 





As you can see from these two examples, JavaScript often uses symbols as 
you evaluate, manipulate, and work with expressions. These symbols are 
called operators. In the examples shown above, the + symbol is used to either 
add numeric values or to concatenate two or more strings together into a 
single one. 



JavaScript has several different types of operators, including assignment, 
arithmetic, counting, and comparison types. 

Assignment operators 

Assignment operators put values into variables. For example, x = 8 assigns 
the value of 8 to the variable x. Table 13-2 shows the assignment operators, 
although as you can see, they really combine assignment and arithmetic 
functionality. 
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Table 13-2 


Assignment Operators 




Assignment 


Description 


J f\o 








x = y 


Sets x to the value of y 


+= 


x += y 


Same as x=x + y 




x -= y 


Same as x = x - y 


*= 


x *= y 


Same as x = x * y 


/= 


x /= y 


Same as x = x / y 



Arithmetic operators 

When you feel like crunching numbers, use arithmetic operators. You'll 
quickly recognize these symbols from your high-school math class. 
Expressions with the most common operators are listed in Table 13-3. 



Table 13-3 


Arithmetic Operators 




Operator Example 


Description 





+ x + y (numeric) Adds x and y together 



x - y Subtracts y from x 



* 


x * y 


Multiplies x and y together 


/ 


x / y 


Divides x by y 






-x 


Reverses the sign of x 



Counting operators 

JavaScript provides operators that are especially designed for counting 
either up or down while a process runs. The same operator can 

I v 0 Retrieve a variable 
V Count up or count down 

Table 13-4 shows the counting operators. 



Table 13-4 




Counting Operators 


Operator 


Description 





++X 



Increases x by 1 (same as x=x+l) before an assignment 
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Operator Description 

Increases x by 1 after an assignment 

Decreases x by 1 (same as x = x - 1) before an assignment 
x- - Decreases x by 1 after an assignment 

Changing before an assignment 

When you place the ++ or - - operators before the variable, the value of the 
variable changes before you use the variable. For example, if x is 8, y= ++x 
changes the variables in this order: 

1. Set x to 9. 

2. Set y to 9. 

Changing after an assignment 

When you place the ++ or - - operators after the variable, the value of the 
variable changes after you use the variable. For example, if x is 8, y=x++ 
changes the variables in this order: 

1. Set y to 8. 

2. Set x to 9. 

Comparison operators 

Comparison operators tell you whether expressions on both sides of the oper- 
ator are the same or different. The result of a comparison operation is either 
true or f al se. Table 13-5 shows the comparison operators. 



Table 13-5 




Comparison Operators 




Operator 


Example 


Description 




x == y 


Returns true if x and y are equal 


i = 


x != y 


Returns true if x and y are not equal 


> 


x > y 


Returns true if x is greaterthan y 


>= 


x >= y 


Returns true if x is greaterthan or 
equal to y 


< 


x < y 


Returns true if x is less than y 


<= 


x <= y 


Returns true if x is less than or equal toy 



(continued) 
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Table 13-5 (continued) 


"\ \2r^C !tor Example 


Description 






x 1 1 y 


Returns true if either x ory is true 


&& x && y 


Returns true if both x and y are true 


! !x 


Returns true if x is false 



Working tilth statements 



As discussed in the "Basic syntax rules" section, JavaScript statements are 
the basic units of a script. Two common types are expression statements and 
conditional statements. 

Expression statement 

An expression statement returns a value. For example, consider the following 
statement: 

f ul 1 Name = firstName + " " + lastName 

The result of this expression is that the variable f ul 1 Name is assigned the 
concatenated value of 

The value of the variable firstName 
A space 

The value of the variable lastName 

The plus signs indicate that the result is concatenated together to form a 
string. 



Conditional statement 

A conditional statement can check your data and decide what to do. It has 
three steps: 

1 . Test a value. 

The result of the test is always either true or false. 

2. Select an action according to the result of the test. 

3. Perform the selected action. 
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The most common conditional statements are the i f and i f/el se state- 
ments. Consider the following i f statement: 




alert( "You are a smarty! The correct answer is Boxen. Well done!") 

I 

The i f statement tests the expression inside the parentheses and determines 
whether or not x = " B o x e n " . If the test evaluates to t r u e , then the state- 
ments inside the curly braces are executed. If the test evaluates to f a 1 se, 
then these lines are bypassed. 

The if/else statement can also be used to specify code to be processed 
when the i f test evaluates to false: 

if ( x = "Boxen" ) { 

y - i 

alert( "You are a smarty! The correct answer is Boxen. Well done!") 

) 

el se { 
y - o 

alertt "You are totally wrong! The correct answer is Boxen. Bad!") 

1 

A second example helps illustrate the steps involved in an i f /el se condi- 
tional statement: 

if (confi rm( "Are you sure you want to do that?")) ( 

alertC'You said yes") 

1 

el se ( 

alertC'You said no") 
1 

Here's how the statement works: 

1. The i f portion of the statement displays a dialog box that asks the user 
to confirm a choice (using the conf i rm( ) method). 

2. The confi rm( ) method returns either true or fa 1 se, depending on the 
user's response. 

• If the user clicks the OK button in the dialog box, the conf i rm( ) 
method returns true. 

• If the user clicks the Cancel button, the conf i rm( ) method returns 

f al se. 
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3. The code then performs an action based on the value that the con 
f i rm( ) method returns. 
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If the method returns true, an alert appears with the message, 
"You said yes," as shown in Figure 13-1. 

• If the method returns f a 1 se, an alert appears with the message, 
"You said no." 



Figure 13-1: 

Confirming a 
user action. 



Microsoft Internet Explorer 



Microsoft Internet Explorer 



4> 



Are you sure you want to 6o that 5 




Loops 

When you need to repeat an action in a JavaScript script, you use a loop. For 
example, a script that uses a loop can 

Iu* Make sure every character in a zip code field is a number. 
Check every item in a list for a specific value 




for hop 

The for loop repeats steps a specific number of times. 

If you don't know how many times you need to repeat some steps, use a 
while loop instead of a f o r loop. 

The for loop in Listing 13-4 calculates a multiplication table. Figure 13-2 
shows the result in the browser. 



Listing 13-4: A for Loop 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http: //www. w3.org/TR/xhtml 1/ DTD/xhtml 1 -transi ti onal . d t d " > 
<html xml ns="http: //www. w3.org/1999/xhtml "> 

<head> 

<title>A For Loop</title> 

</head> 

<body> 

<script type="text/javascri pt" 1 anguage=" javascri pt"> 



document .wri te( " < h 3 > M u 1 ti pi i cati on table for 7 < / h 3 > " ) 

for (loopCount = 0; loopCount <= 10; loopCount++) 
( 
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document. write("7 X " , 1 oopCount , " = ", 7 * 1 oopCount , "<br />"); 
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</html> 



Figure 13-2: 

This script's 
for loop 
calculates 
and displays 
the multi- 
plication 
result. 
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A for loop has three steps: 



1. The initialization step sets the beginning value of the loop variable. 
In Listing 13-4, 1 oopCount = 0 is the initialization step. 

2. The limiting step tells the loop when to stop looping. 

In Listing 13-4, 1 oopCount <= 10 is the limiting step. The loop repeats 
as long as the value of loopCount is less than or equal to 10. 

3. The increment step tells the loop to increase the variable 1 oopCount by 
a specific amount after the for block (the set of statements contained 
inside the curly braces) is executed. 

In Listing 13-4, 1 oopCount++ is the increment step. It increases the value 
ofloopCount byl each time through the loop. 



White loop 

Awhile loop repeats steps until you get a certain kind of result (such as find- 
ing a name in a list). 

If you know exactly how many times you need to repeat steps, use a f o r loop 
instead of a wh i 1 e loop. 
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Listing 13-5 shows the construction of the while loop. 
3-5: A while Loop 



<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http: //www.w3 .org/TR/xhtml 1/ DTD/xhtml 1 -transi ti onal . d t d " > 
<html xml ns="http: //www. w3.org/1999/xhtml "> 

<head> 

<title>A While Loop</title> 

</head> 

<body> 

<script type="text/javascri pt" language="javascript"> 
con = confirmC'Do you want to continue?") 
whiletcon == false) 



document. wri te( "Conti nui ng to wait<br />"); 
con = confirmC'Do you want to continue?") 

) 

</script> 

</body> 

</html> 



Awhile loop works as follows: 



1. The while statement evaluates the expression inside its parentheses. 

In Listing 13-5, con == fa 1 se is evaluated. The value of con is depen- 
dent on whether the user clicks the yes or no button in a confirmation 
message box. 

2. As long as the expression evaluates to true, the code contained inside 
the curly braces (the while block) is repeated. 

In Listing 13-5, notice that the conf i rm statement is triggered again 
at the end of the while block to determine whether the loop should 
continue. 



Functions 

A function is a grouped set of JavaScript statements that 

v 0 Is identified by a name 

Is sectioned off from the rest of the script 

Performs a specific task 
v 0 Must be called by other parts of the script to execute 
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Functions are useful when you want organize your code into separate units 
or when you use a bit of code more than once in a script. For example, a user 
r information into a form. You can use a function to save that infor- 
erform a calculation on it, and allow other parts of the script to call 
the function to retrieve the result of the calculation. 



A function consists of 



The function declaration, which contains the keyword function, a unique 
function name, and parentheses. Optionally, you can pass values into 
the function by adding arguments inside the parentheses. 

The function block, which is a set of one or more statements surrounded 
by curly braces. 



The basic structure of a function looks like this: 



function name_of_function(argument) ( 
// One or more statements 

} 



Here is an example of a function: 

function al ertMessaget ) { 
al ert ( "PI ease enter a value in this field.") 
) 



When your page loads into the browser and your script is processed by the 
browser, the function code doesn't run automatically. Instead, it has to be 
explicitly called in your script. Therefore, to trigger the alertMessageO 
function, you need to call it by name: 



alertMessage( ) 



Listing 13-6 shows a script with a function that is used to display a variety of 
alerts, depending on which button the user presses. 



Listing 13-6: Calling a Function 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http://www.w3 . org/TR/xhtml 1/ DTD/xhtml 1 -transi ti onal . d t d " > 
<html xml ns="http: //www. w3.org/1999/xhtml "> 

<head> 

<title>Function calling</title> 

<script 1 anguage=" javascri pt" type="text/javascri pt"> 

function saySomething(message) { 

alert(message) 

} 

</script> 
</head> 



(continued) 
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<form acti on="#"> 
<input type="button" val ue="George Orwell" onclick= 
"saySomething( 'To write or even speak English is not a science but 
an art. ' )" /> 

<input type="button" val ue="Arthur Conan Doyle" onclick= 

"saySomething( 'We cannot command our love, but we can our actions.')" /> 

<input type="button" val ue=" H . G . Wells" onclick= 

"saySomething( ' If we do not end war, war will end us.')" /> 

</form> 

</body> ^ 
</html> 

The result of this script is shown in Figure 13-3. 



Figure 13-3: 
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In the script, when the user clicks one of the buttons on the page, the say 
Somethi ng function is called and is passed the information in quotes, which 
the function stores in the variable message. The function then displays the 
alert, with the value of message, which is the quotation it was passed. 



Arrays 

An array is a collection of values. Arrays are useful because you can use them 
to manipulate and sort groups of things. 
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The location of information in an array is based on a numbered position 
called the index. The numbering of the index always starts at 0 and goes up. 

has a special object — the Array object — just to handle arrays. 



Creating arrays 

To create an instance of an array, you must use the new operator along with 
the Array object, like this: 

x = new Array( ) 

You can fill in the array when you create the Array object, separating the 
array elements with commas, like so: 

theDays = new Array( "Monday" , "Tuesday", "Wednesday", "Thursday", "Friday", 
"Saturday", "Sunday") 



Accessing arrays 

Once the array has been created, you can write to it and read from it by using 
the [ ] operator. By placing a position number in this operator, you can 
access the data stored at that index number. 

For example, the value oftheDays[2] in the preceding example is 
Wednesday (array positions always begin with 0, so Monday is 0). 

Reading elements 

To read an element from an array, create a variable and assign it a value from 
the array, like this: 

thisDay = theDays [6] 

The value of t hi s Day is now Sunday. 

Writing elements 

To write a value to the array, follow these steps: 

1. Identify the index of the value you want to change. 

2. Assign a new value to the array element, like this: 

theDays[0] = "Mon" 



Looping 

All arrays have a length property, which is very useful for discovering how 
many elements the array contains, and is often used to loop through the 
array elements, like this example: 
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planets = new Array ("Mercury", "Venus", "Earth", "Mars") 
fjjr (i = 0; i < pi anets . 1 ength ; i++) 
anets[i ] ) ; 



This causes the browser to display a series of four alert boxes, each contain- 
ing one of the names of the pi anets array. The value of pi anets . 1 ength is 
3 (since numbering starts at 0), and the script steps through each element of 
the array until the value of the counting variable i is greater than 3, at which 
time the script ends. 



Objects 

Most JavaScript scripts are designed to "give life" to objects that exist inside 
your browser. A rollover brings an image link to life. A validated e-mail address 
field is smart about what kind of e-mail address it will accept. A document dis- 
plays new text on the fly based on a response from the Web page visitor. 

Within JavaScript, you work with a variety of objects, such as the browser 
window, a button, a form field, an image, or even the document itself. 
Because JavaScript's primary calling is to work with objects, the scripting 
language is called an object-based language. 

Think, for a moment, of an object that exists in the real world, such as a car 
or an MP3 player. Each of these objects has characteristics that describe the 
object, such as its color, weight, and height. Many objects also have a behav- 
ior that can be triggered. A car can be started; an MP3 player can be played. 

These real-world analogies can be applied to JavaScript. Objects you work 
with have descriptive qualities (called properties) and behaviors (called meth- 
ods). For example, a document object represents the HTML page in your 
browser. It has properties, such as 1 i nkCol or, ti tl e, and 1 ocati on, as well 
as methods, such asopen(),clear(), and write( ). (Methods always have 
parentheses following their names.) 

JavaScript uses periods (or dots) to access an object's properties or methods: 

object .property 
object .method{ ) 

For example, to get the title of the document and assign it to a variable, you 
write this: 

mytitle = document. title 
To call the clear method of the document, you write this: 

document. clear( ) 
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actions that either the browser executes or the user performs 
while visiting your page. Loading a Web page, moving the mouse over an 
image, closing a window, and submitting a form are all examples of events. 

JavaScript deals with events by using commands called event handlers. Any 
action by the user on the page triggers an event handler in your script. Table 
13-6 is a list of JavaScript's event handlers. 



Table 13-6 


Event Handlers 




Event Handler 


Description 




onabort 


User cancels a page load. 




onbl ur 


An element loses focus because the user focuses on a 
different element. 


onchange 


User changes the contents of a form element oi 
different check box, radio button, or menu item. 


■ selects a 


oncl i ck 


User clicks an element with the mouse. 




ondbl click 


User double-clicks an element with the mouse. 




onerror 


Browser encounters an error in the scripts or other 
instructions on the page. 


onf ocus 


An element becomes the focus of the user's attention, like 
a form field when you start typing in it. 


onkeydown 


User presses and holds a key on the keyboard. 




onkeypress 


User presses and immediately releases a key on the 
keyboard. 


onkeyup 


User releases a depressed key. 




onl oad 


Browser loads an HTML page. 




onmousedown 


User moves the mouse pointer over an element, presses 
the mouse button down, and holds it down. 


onmousemove 


User moves the mouse pointer anywhere on the page. 


onmouseout 


User moves the mouse pointer off an element. 




onmouseover 


User moves the mouse pointer over an element. 



(continued) 
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Description 


onmouseup 


User releases a held mouse button. 


onreset 


User clicks a form's Reset button. 


onresi ze 


User resizes the browser window. 


onsel ect 


User selects a check box, radio button, or menu item from 
a form. 


onsubmi t 


User clicks a form's Submit button. 


onunl oad 


Browser stops displaying one Web page because it's 
about to load another. 



Not all objects support every event handler. For example, the onl oad handler 
is supported by only the wi ndow and i mage objects. The onsubmi t event 
handler is supported by only the form object. 

A common way to deal with event handlers is to use them as an attribute of 
an HTML element. This is called an inline event handler. Here is an example 
of the onsubmi t inline event handler being used as an attribute of a <f orm> 
tag: 



<form onsubmit="submi 


tlt(this)" a 


C" 


ti on="submit 



This example calls the s u bm i 1 1 1 function when the user clicks the form's 
Submit button. You can also embed JavaScript commands in the HTML, like 
this: 



<input type="button" value="Click Me!" 




name="buttonl" oncl i ck="al ert( "That tickles!") 


;" /> 



A third way to use event handlers is to express them in JavaScript code, like 
this: 



document. buttonl. onclick = function 0 { a 1 ert ( "That tickles!")) 
Chapter 15 offers examples of event handlers. 



Document Object Model (DOM) 



JavaScript gives you the tools to manipulate the objects in a Web page. The 
Document Object Model (DOM) is the specification for how all those objects 
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are represented. The DOM is a Web standard, defined by the World Wide Web 
Consortium (W3C; more information than you can imagine about the DOM 
^ion is available at www . w3 . org/DOM). 



The DOM allows JavaScript to programmatically access and manipulate the 
contents of a document. The DOM defines 



Each object on a Web page 
V Attributes associated with those objects 

Methods that you can use to manipulate those objects 

By using the DOM, JavaScript can dynamically update the content, structure, 
and style of Web pages. This means that you can use JavaScript to produce 
effects in your Web pages, such as 

Iv* Rewriting your document on the fly 
Changing styles and style sheets 
«* Page layout 



Mar</elou$ Miscellany 

Table 13-7 lists other script- and forms-related (X)HTML markup attributes 
that you might find in HTML files. 



Table 13-7 


Other Script- and Forms-related (X)HTML Attributes 


Name 


Function/Value Equals 


Value 
Types 


Related 
Element(s) 


decl are 


Declares document object 


"dec! a re" 


<scri pt> 




without invoking it 






defer 


Allows user agent to 
defer script execution 


"defer" 


<scri pt> 



References and Resources 

This part of the book presents the basics of the JavaScript language and how 
to add and adapt scripts that you find on the Web to your own HTML pages. 
But the JavaScript language is more powerful than that. 
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If you want to start writing your own code, you need more information. The 
best place to get your questions answered is online. Many resources on the 
help you use JavaScript. Visit www . dummi es. com /extras, click 
For Dummies, 5th Edition" in the list, and go to the Chapter 13 link 
for a detailed list of Web sites and books that can help you create and use 
JavaScript. 
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In This Chapter 

Using forms in your Web pages 
Creating forms 
Working with form data 
Designing easy-to-use forms 

•••••••••••••••••a 



ost of the HTML you write helps you display content and information 
for your users. Sometimes, however, you want a Web page to gather 
information from users instead of giving static information to them. HTML 
form markup tags give you a healthy collection of elements and attributes for 
creating forms to collect information from visitors to your site. 

This chapter covers the many different uses for forms. It also shows you how 
to use form markup tags to create just the right form for soliciting informa- 
tion from your users, reviews your options for working with the data you 
receive, and gives you some tips for creating easy-to-use forms that really 
help your users provide the information you're looking for. 



Uses far Farms 

The Web contains millions of forms, but every form is driven by the same set 
of markup tags. Web forms can be short or long, simple or complex, and they 
have myriad uses. But they all fall into one of two broad categories: 

V Search forms that let users search a site or the entire Web 

Data collection forms that provide information for such uses as online 
shopping, technical support, site preferences, and personalization 
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Before you create any form markup, you need to determine what kind of data 
your visitors will search for on your site and/or what kind of data you need to 
;om visitors. Your data drives the form elements you use — and how 
hem together on a page. 



Searches 

Search forms help you give visitors information. 

The following search forms are from the friendly folks at the Internal Revenue 
Service (IRS). The difference between these search forms is the data the IRS 
site needs from you for its search: 

The IRS home page (shown in Figure 14-1) is a simple search form that 
uses two different single-field forms to help visitors search for general 
information and tax forms. This type of form can produce dozens of rele- 
vant responses. Visitors can both 

• Choose the best option. 

• Look at more than one option. 

A more complicated search form, such as the Get Refund Status page (as 
shown in Figure 14-2), produces only one specific response. It searches 
IRS records for the status of your refund. This page demands detailed 
information because the IRS doesn't want you to see anyone else's 
refund; therefore, it both 

• Finds the data visitors need. 

• Hides data that visitors shouldn't see. 



3 IRS.gov Home - Microsoft Internet Explorer f^]|^]|^<" 
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1040 Central: Find what you need, fast 

Ho matter which form you use. 1040 Central has the links you'll ne> 
to file your 2004 tax return. Get the latest news and forms, plus 
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Donations to domestic, charitable organizations helping in foreign 
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Figure 14-2: 
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Searches come in all shapes and sizes, so the search forms that drive those 
searches come in all shapes and sizes, too. A short keyword search might do 
the trick, or you might need a more sophisticated search method. 



Data collection 

Data collection forms receive information you want to process or save. When 
you create a form that collects information, the information you need drives 
the structure and complexity of the form: 

]S If you need just a little information, the form may be short and (rela- 
tively) sweet. 

The Library of Congress (LC) uses a form to collect information from 
teachers to subscribe to a free electronic newsletter, as shown in Fig- 
ure 14-3. The LC doesn't need much information to set up the subscrip- 
tion, so the form is short and simple. 

u* If you need a lot of information, your form may be several pages long. 

RateGenius uses long and detailed forms to gather the information it 
needs to help customers get the best possible loan rate. The page in 
Figure 14-4 is just the first of several that a visitor must fill out to provide 
all the necessary information. 
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Figure 14-3: 
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Creating Forms 

HTML form markup tags and attributes can 

Define the overall form structure. 

Every form has the same basic structure. 
i>* Tell the Web browser how to handle the form data. 
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Which input elements you use depends on the data you're collecting. 
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All of the input elements associated with a single form are 

v* Contained within a <f orm> tag 

V Processed by the same form handler 

A form handler is a program on the Web server (or a simple ma i 1 to URL) 
that manages the data a user sends to you through the form. A Web 
browser can only gather information through forms; it doesn't know what 
to do with the information once it has it. You must provide some other 
mechanism to actually do something useful with the data you collect. 
This chapter covers form handlers in detail later. 



Attributes 

You always use these two key attributes with the <f orm> tag: 
is* acti on: The URL of the form handler. 

i>* method: How you want the form data to be sent to the form handler. 
Your form handler dictates which of these values to use for method: 

• get sends the form data to the form handler on the URL. 

• post sends the form data in the Hypertext Transfer Protocol 
(HTTP) header. 

Webmonkey offers a good overview of the difference between get and 
post in its "Good Forms" article: 

http : //hotwi red. lycos.com/webnonkey/99/30/ index4a_page3.html 

Markup 

The markup in Listing 14-1 creates a form that uses the post method to send 
user-entered information to a form handler (guest bo ok . cgi) to be 
processed on the Web server. 



Listing 14-1: A Simple Form Processed by a Form Handler 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http://www.w3 . org/TR/xhtml 1/ DTD/xhtml 1 -transi ti onal . d t d " > 
<html xml ns=" http : //www. w3.org/1999/xhtml "> 
<head> 

<title>Forms</title> 
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<meta http-equiv="Content-Type" content="text/html ; charset=IS0-8859-l" /> 



<ihead> 

p Books 



| acti on="cgi -bi n/guestbook.cgi " method="post"> 

<!-- form input elements go here --> 

</form> 
</body> 

</html> 

The value of the acti on attribute is a URL, so you can use absolute or rela- 
tive URLs to point to a form handler on your server. 



Input tags 



The tags you use to solicit input from your site visitors make up the bulk of 
any form. HTML supports a variety of different input options — from text 
fields to radio buttons and from files to images. 

Every input control associates some value with a name: 

11* When you create the control, you give it a name. 
i* The control sends back a value based on what the user does in the form. 

For example, if you create a text field that collects a user's first name, you 
might name the field firstname. When the user types his or her first name in 
the field and submits the form, the value associated with f i rstname is what- 
ever name the user typed in the field. 

The whole point of a form is to gather values associated with input controls, 
so the way you set the name and value for each control is important. The fol- 
lowing sections explain how you should work with names and values for each 
of the input controls. 

Input fields 

You can use a variety of input fields in your forms. 

For input elements that require a user to select an option (such as a check 
box or radio button), rather than typing something into a field, you define 
both the name and the value. When the user selects a box or a button and 
clicks the Submit button, the form returns the name and value assigned to 
the element. 
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Text 

Text fields are single-line fields that users can type information into. 



use the <i nput /> element to define a text field and the type 
attribute with a value of text. 

<input type="text" /> 
You use the name attribute to give the input field a name. 

<input type="text" name "firstnane" /> 
The user supplies the value when he or she types in the field. 



This markup creates two text input fields 
last name: 



one for a first name and one for a 




<form action="cgi - bin/guestbook.cgi " acti on="post"> 
<p>First Name: <i nput type="text" name="f i rstname" /></p> 
<p> Last Name: <i nput type="text" name="l astname" /></p> 

</form> 

In addition to the <i nput /> elements, the preceding markup includes para- 
graph (<p>) elements and some text to label each of the fields. By them- 
selves, most form elements won't give the user many clues about the type of 
information you want. You also must use HTML block and inline elements to 
format the appearance of your form. Figure 14-5 shows how a browser dis- 
plays this HTML. 



Figure 14-5: 

Text entry 
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form. 
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You can control the size of a text field with these attributes: 
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^e: The length (in characters) of the text field 

rl ength: The number of characters the user can type into the field 



The following markup creates a form that sets both fields to a s i ze of 30 and 
a max! ength of 25. Each field will be about 30 characters long; even so, a 
user can type only 25 characters into each field, as shown in Figure 14-6. 

<form action="cgi - bin/guestbook.cgi " acti on="post"> 
<p>First Name: <input type="text" name="f i rstname" size="30" 

maxlength="25" /></p> 
<p> Last Name: <input type="text" name="l astname" size="30" 
maxlength="25" /></p> 

</form> 



Passwords 

A password field is a text field that doesn't display what the user types. 
Someone looking over the user's shoulder sees each keystroke represented 
on the screen by a placeholder character, such as an asterisk or bullet. 



You create a password field by using the <i nput /> element with a type 
attribute set to password, as follows: 



<form action="cgi - bin/guestbook.cgi " acti on="post"> 

<p>Fi rst Name: <i nput type="text" name="fi rstname" si ze= " 30 " 

maxlength="25" /></p> 
<p> Last Name: <i nput type="text" name="l astname" si ze= " 30 " maxl ength="25" /></p> 
<p>Password: <i nput type="password" name="psswd" si ze= " 30 " maxl ength="25" /></p> 
</form> 
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You can 
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Password fields are programmed like text fields. 



7 shows how a browser replaces what you type with bullets. Some 
may replace the text with asterisks or some other character. It 
depends on the browser's default. 
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Check boxes and radio buttons 

If only a few possible values are available to the user, you can give him or her 
a collection of options to choose from: 

Check boxes: Choose more than one option. 
u* Radio buttons: Choose only one option. 

If many choices are available, use a drop-down list instead of radio buttons or 
check boxes. 



To create radio buttons and check boxes, you 

V Use the <i nput /> element with the type attribute set to radi o or 
checkbox. 

• If the attribute value is radi o, a round radio button appears. 

• If it's checkbox, a check box appears. 

Radio buttons differ from check boxes in that users can select a single 
radio button from a set of options but can select any number of check 
boxes (including none). 
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Create each option with these attributes: 

" The name attribute to give the option a name. 

The val ue attribute to specify what value is returned if the user 
selects the option. 

You can use the checked attribute (with a value of checked) to specify 
that an option should be already selected when the browser displays the 
form. This is a good way to specify a default selection in a list. 



This markup shows how to format check box and radio button options: 



<form action="cgi-bin/guestbook.cgi " acti on="post"> 




<p>What are some of your favorite foods?</p> 






<p><input type="checkbox" name="food" value="pizza" checked="checkec 


" /> 


Pizza<br /> 






<input type="checkbox" name="food" value="icecream" /> I ce Cream<t 


r /> 


<input type="checkbox" name="food" value="e 


jgsham" />Green Eggs a 


nd Ham<br /> 


</p> 






<p>What is your gender?</p> 






<p><input type="radio" name="gender" value="ma 


e" />Male<br /> 




<input type="radio" name="gender" value="female" checked="checked 


" /> 


Femal e</p> 






</form> 







In the preceding code, each set of options uses the same name for each input 
control but gives a different value to each option. You give each item in a set 
of options the same name to let the browser know they are part of a set. 
Figure 14-8 shows how a browser displays this markup. 
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Hidden fields 

A hidden field gives you a way to collect name and value information that the 
t see along with the rest of the form data. Hidden fields are useful if 
to keep track of information associated with the form (such as its 
version or name). 

If your Internet service provider (ISP) provides a generic application for a 
guest book or feedback form, you might have to put your name and e-mail 
address in the form's hidden fields so the data goes specifically to you. 

To create a hidden field, you 

V Use the < i n p u t / > element with its ty p e attribute set to hidden. 
f Supply the name and value pair you want to send to the form handler. 



Here's an example of markup for a hidden field: 



<form action="cgi - bin/guestbook.cgi " acti on="post"> 

<input type=" hidden" name="e-mai 1 " val ue="me@mysite.com" /> 

<p>First Name: <input type="text" name="f i rstname" si ze= " 30 " 

maxlength="25" /></p> 
<p> Last Name: <i nput type="text" name="l astname" si ze= " 30 " maxlength="25" /></p> 
<p>Password: <i nput type="password" name="psswd" si ze= " 30 " maxl ength=" 25 " /></p> 
</form> 



As a general rule, using your e-mail address in a hidden field is just asking for 
your address to be picked up by spammers. If your ISP says that this is how 
you should do your feedback form, ask them if they have any suggestions for 
how you can minimize the damage. Surfers to your page can't see your e-mail 
address, but spammers' spiders can read the underlying tags. 

File uploads 

A form can receive documents and other files, such as images, from users. 
When the user submits the form, the browser grabs a copy of the file and 
sends it with the other form data. To create this file upload field, 

f* Use the <i nput /> element with the type attribute set to f i 1 e. 

The file itself is the form field value, 
f* Use the name attribute to give the control a name. 

Here's an example of markup for a file upload field: 



<form action="cgi -bin/guestbook.cgi " acti on="post"> 

<p>Pl ease submit your resume in Microsoft Word or plain text format:<br /> 
<i nput type="file" name="resume" /> 

</p> 
</form> 
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DropBooks 



Browsers render a file upload field with a browse button that allows users to 
surf their local hard drive and select a file to send to you, as in Figure 14-9. 



Figure 14-9: 

A file upload 
field. 
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When you accept users' files through a form, you can receive files that are 
either huge or are infected by viruses. Consult with whoever is programming 
your form handler to discuss options for protecting the system where files 
are saved. Several barriers can help minimize your risks, including 



i>* Virus-scanning software 
f* Restrictions on file size 
*** Restrictions on file type 

brop-douln lists 

Drop-down lists are a great way to give users lots of options in a little screen 
space. You use two different tags to create a drop-down list: 

<sel ect> holds the list. 

Use a name attribute with the <sel ect> element to name the entire list. 

A collection of <opti on> elements identifies the list options. 

The val ue attribute assigns a unique value for each <opti on> element. 
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Here's an example of markup for a drop-down list: 



DropBocfe 



t i o n = " c g i -bin/guestbook. cgi " acti on="post"> 
is your favorite food?</p> 
name="food"> 
<option val ue="pizza">Pizza</option> 
<option value="icecream">Ice Cream</option> 
<option val ue="eggsham">Green Eggs and Ham</option> 
</select> 
</form> 

The browser turns this markup into a drop-down list with three items, as 
shown in Figure 14-10. 



Figure 14-10: 

A drop- 
down list. 
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You can enable users to select more than one item from a drop-down list by 
changing the default settings of your list: 

V If you want your user to be able to choose more than one option (by 
holding down the Alt [Windows] or §§ [Mac] key while clicking options 
in the list), add the mul ti pi e attribute to the <sel ect> tag. The value 
of mul ti pie is mul ti pi e. 

Because of XHTML rules, standalone attributes cannot stand alone; 
therefore, the value is the same as the name of the attribute. 

By default, the browser displays only one option until the user clicks the 
drop-down menu's arrow to display the rest of the list. Use the si ze 
attribute with the <sel ect> tag to specify how many options to show. 

If you specify fewer than the total number of options, the browser 
includes a scroll bar with the drop-down list. 
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You can specify that one of the options in the drop-down list be already 
selected when the browser loads the page, just as you can specify a check 
idio button to be checked. Simply add the sel ected attribute to 
due of s e 1 e c t e d f or the < o p t i o n > tag you want as the default. 

The following markup 



f Allows the user to choose more than one option from the list 

Displays two options 
v 0 Selects the third option in the list by default 



<form action="cgi -bin/guestbook.cgi " acti on="post"> 


<p>What are some of your favorite foods?</p> 


<select name="food" size="2" multiple="multiple"> 




<opti on val ue=" pi z z a " > P i zza</opti on> 




<opti on value="icecream">Ice Cream</opti on> 




<opti on val ue="eggsham" selected="selected">Green Eggs and Ham</opt 


ion> 


</select> 




</form> 





Figure 14-1 1 shows how adding these attributes modifies the appearance of 
the list in a browser. 
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Figure 14-11: 

A drop- 
down list 
with modi- 
fications. 



Mutti-tine text boxes 

If a single-line text field isn't enough room for responses, create a text box 
instead of a text field: 



Chapter 14: Working with Forms 



ipBoofcs 



v 0 The <textarea> element defines the box and its parameters. 

The rows attribute specifies the height of the box in rows based on the 
in the text box. 



cols attribute specifies the width of the box in columns based on 
the font in the text box. 



The text the user types into the box provides the value, so you need only give 
the box a name with the name attribute: 




<form acti on="cgi -bi n /guest book. eg i " 


acti on="post"> 


<textarea rows="10" cols="30" name= 


="comments"> 


Please include any comments here 




</textarea> 




</form> 





Any text you include between the <textarea> and </textarea> tags 
appears in the text box in the browser, as shown in Figure 14-12. The user 
then enters information in the text box and overrides your text. 



"3 Pixel's Form - Microsoft Internet Expli 



Figure 14-12: 

A text box. 




Submit and reset 

Submit and reset buttons help the user tell the browser what to do with the 
form. You can create buttons to either submit or reset your form using the 
<i nput /> element with the type and val ue attributes: 
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Visitors need to tell a browser that they are done with a form and want 
nd the contents. You create a button to submit the form to you by 
g this markup: 

(input type="submit" val ue="Submit" /> 

You don't use the name attribute for the submit and reset buttons. You 
use the value attribute instead to specify how the browser labels the 
buttons for display. 

v 0 Reset 

Visitors need to clear the form if they want to start all over again or 
decide not to fill it out. You create a button to reset, or clear, the form by 
using the following markup: 

<input type="reset" val ue="Cl ear" /> 

You can set the value to anything you want to appear on the button. In our 
example, we set ours to Clear. You can use something that's more appropriate 
to you if you'd like. 

Here's an example of markup to create Submit and Reset buttons named Send 
and Clear, respectively: 

<form action="cgi - bin/guestbook.cgi " acti on="post"> 
<p>First Name: <input type="text" name="f i rstname" si ze= " 30 " 

maxlength="25" /></p> 
<p> Last Name: <i nput type="text" name="l astname" si ze= " 30 " maxl ength="25" /></p> 
<p>Password: <i nput type="password" name="psswd" si ze= " 30 " maxl ength="25" /></p> 

<p>What are some of your favorite foods?</p> 

<p><input type="checkbox" name="food" va 1 ue=" pi zza " checked="checked" /> 
Pi zza<bn /> 

<i nput type="checkbox" name="food" value="icecream" />Ice Cream<br /> 

<input type="checkbox" name="food" val ue="eggsham" />Green Eggs and Ham<br /> 

</p> 

<p>What is your gender?</p> 

<p><input type="radio" name="gender" value="male" />Male<br /> 

<i nput type=" radio" name="gender" val ue="femal e" checked="checked" /> 
Female</p> 



<P> 

<input type="submit" value="Send" /> 
<input type="reset" val ue="Cl ear" /> 

</p> 
</form> 



Figure 14-13 shows how a browser renders these buttons in a form. 
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Customizing 

If you don't like the Submit and Reset buttons that a browser creates, you can 
substitute your own graphical buttons by using 

The <i npiit /> element with a type of image. 
An src attribute that specifies the image's location. 
i>* A val lie that defines the result of the field: 

• For an image that submits the form, set val ue to submi t. 

• For an image that clears the form, set value to reset. 

Use the a 1 1 attribute to provide alternative text for browsers that don't show 
images (or for users who can't see them). 

The following markup creates customized submit and reset buttons: 

<p><input type="image" val ue="submi t" s rc=" submi t_button . gi f " a 1 1= " Submi t " /> 
<i nput type="image" value="reset" src="reset_button.gif" alt="Clear" /> 

</p> 



Validation 

No matter how brilliant your site's visitors, there's always a chance that 
they'll enter data you aren't expecting. JavaScript to the rescue! 
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Form validation is the term for checking the data the user enters before it's 
put into your database. Check the data with both JavaScript and Common 
Interface (CGI) scripts on your server. 




VaScript 

You can validate entries in JavaScript before data goes to the server. This 
means that visitors don't wait for your server to check the data — they're 
told quickly (before they click Submit, if you want) if there's a problem. 

You can learn more about JavaScript and your forms so you can use them on 
your Web site at 

V www . w3school s.com/js/default.asp 

www . qu irksmode. org/ js /forms. html 

i>* http : //webmonkey . wi red . com/webmonkey/programmi ng/ 
j avascri pt 

CGI 

You need to validate your form data on the server side because users can 
surf with JavaScript turned off. (They'll have a slower validation process.) 
Find out more about CGI in the next section and at 



I 



i>* www .4guysf romrol la.com/webtech/LearnMore/Validation.asp 
www . eg i 101. com/book 



Processing Data 



Getting form data is really only half of the form battle. You create form ele- 
ments to get data from users, but then you need to do something with that 
data. Of course, your form and your data are unique every time, so no single, 
generic form handler can manage the data for every form. Before you can find 
(or write) a program that handles your form data, you must know what you 
want to do with it. For example, 



V If you just want to receive comments from a Web form by e-mail, you 
might need only a simple ma i 1 to : URL. 

If a form gathers information from users to display in a guest book, you 

• Add the data to a text file or a small database that holds the 
entries. 

• Create a Web page that displays the guest-book entries. 
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If you need a shopping cart, you need programs and a database that can 
handle inventory, customer-order information, shipping data, and cost 
ulations. 



Your Web hosting provider — whether it's an internal IT group or an ISP to 
which you pay a monthly fee — has the final say in what kind of applications 
you can use on your Web site to handle form data. If you want to use forms on 
your site, be sure that your hosting provider supports the applications you 
need to run on the server to process form input data (which will normally use 
post or get methods that we discuss earlier in this chapter). Chapter 3 
includes more information on finding the right ISP to host your pages. 



Using CGI scripts and other programs 

Typically, form data is processed in some way or another by a Common 
Gateway Interface (CGI) script written in some programming language, such 
as Perl, Java, AppleScript, or one of many other languages that run on Web 
servers. These scripts make the data from your form useful by 

IV 0 Putting it into a database 
Creating customized HTML based on it 
Writing it to a flat file 

^^3\ If you aren't familiar with CGI scripts and how they work, the "CGI Scripts for 
I fOJ 1 Fun and Profit" article on Webmonkey provides an excellent overview: 

http: //hotwi red. lycos .com/webmonkey/ 99/26/ i ndex4a .html 

You don't have to be a programmer to make the most of forms. Many ISPs 
support (and provide) scripts for processing common forms such as guest 
books, comment forms, and even shopping carts. Your ISP may give you 

v* All the information you need to get the program up and running 
HTML to include in your pages 




You can tweak the markup that manages how the form appears in the canned 
HTML you get from an ISP, but don't change the form itself — especially the 
form tag names and values. The Web server program uses these to make the 
entire process work. 



Several online script repositories provide free scripts that you can download 
and use along with your forms. Many of these also come with some generic 
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HTML you can dress up and tweak to fit your Web site. You simply drop the 
program that processes the form into the folder on your site that holds pro- 
sually called cgi-bin), add the HTML to your page, and you're good 
choice places on the Web to find scripts you can download and 
put to work immediately are 




v 0 Matt's Script archive: www .sen' pta rchi ve . com/nms . html 

V The CGI Resource Index: http : //cgi . resourcei ndex .com 

V ScriptSearch: www .scriptsearch.com 

If you want to use programs that aren't provided by your ISP on your Web 
site, you need complete access to your site's cgi-bin folder. Every ISP's setup 
is different, so read your documentation to find 

I*** Whether your ISP allows you to use CGI scripts in your Web pages 
«" Languages the ISP supports (Perl is a safe bet, but it's safer to be sure.) 



Sending data by e-mail 

You can opt to receive your form data from e-mail instead of using a script or 
other utility to process a form's data. You get just a collection of name and 
value pairs in a text file sent to your e-mail address, but that isn't necessarily 
a bad thing. You can include a short contact form on your Web site that asks 
people to send you feedback (a feature that always looks professional); then 
you can simply include, in the action URL, the e-mail address you want the 
data sent to: 



<form action="mailto:me@mysite.com" acti on="post"> 




Many spam companies get e-mail addresses by trolling Web sites looking for 
ma i 1 to URLs. Consider setting up a special e-mail account just to receive 
comments so the e-mail address you use every day won't have yet another 
way to get pulled onto spam mailing lists. 



besiqninq User -Friendly Forms 

Designing useful forms is a different undertaking from designing easy-to-use 
forms. Your form may gather the data that you need, but if it's hard for visi- 
tors to use, they may abandon it before they're done. 
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As you use the markup elements from this chapter, along with the other ele- 
ments that drive page layout, keep the following guidelines in mind: 

' J^P^^ide textual cues for all your forms. Be clear about 

• Information you want 

• Format you need 
For example, tell users such inputting details as whether 

• Dates must be entered as mm/dd/yy (or as mm/dd/yyyy ). 

• The number of characters a field can take is limited. 

Characters can be limited with the maxlength attribute. 

f* Use field width and character limits to provide visual clues. For exam- 
ple, if users should enter a phone number as xxx-xxx-xxxx, consider cre- 
ating three text fields — one for each part of the phone number. 

Group similar fields together. A logical grouping of fields makes filling 
out a form easier. It's confusing if you ask for the visitor's first name, 
then birthday, then last name. 

V Break long forms into easy-to-manage sections. Forms in short chunks 
are less intimidating and more likely to be completed. 

Major online retailers (such as Amazon.com) use this method to get the 
detail they need for orders without making the process too painful. 

Mark required fields clearly. If some parts of your form can 't be left 
blank when users submit the form, mark those fields clearly. 

You can identify required fields by 

• Making them bold 

• Using a different color 

• Placing an asterisk beside them 

Tell users what kind of information they need for the form. If users 
need any information in their hands before they fill out your form, a form 
gateway page can detail everything users should have before they start 
filling out the form. 

The RateGenius Apply For a Loan page, shown in Figure 14-14, lays out 
clearly for visitors about to fill out a long form exactly what information 
to prepare before starting. 

The series of forms RateGenius uses to gather information for car loans and 
loan refinancing are excellent examples of long forms that collect a variety of 
different kinds of data by using all the available form markup elements. Visit 
www . rategeni us .com to review its form techniques. 
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Figure 14-14: 
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Apply For a Loan 



The application process lakes aPout 5-10 minutes You will need the following information if 
you are refinancing a car 

• Your loan documentation that contains your current interest rate loan term onginal 
amount financed, date of first payment and VIN 

■ Your vehicle's current mileage 

• Co-signer information (name, birth date SSN etc ). if you are applying with a co- 
signer or joint applicant 

To apply through rateGenius you must be a resident in a Alabama, Arizona, California, 
Colorado, Florida, Georgia, Illinois, Indiana, Iowa, Kansas. Kentucky, Maryland, 
Michigan, Missouri, New Jersey, New York, North Carolina, Ohio, Pennsylvania, 
South Carolina, Tennessee. Texas, Virginia or Washington 

Nott: in CA married applicants can apply for seperate credit 

You previously started Application # 263288 Would you like to continue this application 
where you left off? (ClicKing No will start a new application.) 
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Table 14-1 lists other forms-related (X)HTML markup attributes that you 
might find in HTML files. 



Table 14-1 


Other Forms-related (X)HTML Attributes 


Name 


Function/Value Equals 


Value Types 


Related 








Elementfs) 


Accept 


Lists acceptable MIME 


CS Media 


<f orm> 




types for file upload 


types 


<input /> 


accept- 


Lists character encodings 


SS Encodings 


<f orm> 


charset 










Checked 


Preselects option for 


"checked" 


<input /> 




select lists 








Di sabl ed 


Disables form elements 


"di sabl ed" 


<button> 



<i nput> 
<optgroup> 
<opti on> 
<sel ect> 
<textarea> 



Chapter 14: Working with Forms 



Name Function/Value Equals Value Types Related 

Element(s) 

pe Specifies encoding method Media type <form> 

for form input data 

for Points to ID reference Idref <1 abel > 

from other attributes 

label Identifies a group of Text <optgroup> 

options in a form 

label Specifies an option name Text <option> 

in a form 



method 


HTTP method to use when 
submitting a form 


("get" | 
"put" ) 


<f orm> 


mul ti pi e 


Permits multiple option 
selection in a form 


"mul ti pi e" 


<sel ect> 


name 


Names a specific form 
control 


CDATA 


<button> 
<texta rea> 


name 


Names a specific form 
input field 


CDATA 


<sel ect> 


name 


Names a form for 
access 


script 


CDATA 


<f orm> 


readonl y 


Blocks editing of text 
fields within a form 


"readonly" 


<input /> 
<texta rea 


si ze 


Specifies number of lines 
of text to display for a 
drop-down menu 


Number 


<sel ect> 


tabi ndex 


Defines tabbing order for 
form fields 


Number 


<a><area /> 
<button> 



<input /> 
<object> 
<sel ect> 



<textarea> 

type Defines button I "button" | <button> 

function in a form "reset" | 

"submit" } 



DropBooks 



(continued) 
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Table 14-1 (continued) 




Function/Value Equals I 


Value Types 


Related 
Element(s) 


type 


Specifies type of input 
required for form input field ' 


I "button" 
'checkbox" 
'file" | 
'hi dden " 
'image" 


<input /> 






'password" 
"radio" | 
' reset" 
'submit" 
'text" ) 






val ue 


Supplies a value to send to ( 
the server when clicked 


:data 


<button> 


val ue 


Associates values with ( 
radio buttons and check 
boxes 


3DATA 


<input /> 
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In This Chapter 

What is DHTML? 
Image and text rollovers 
Adding dynamic content 
Showing pop-up windows 
Using Web cookies 



f 

■ f you are the outdoor type, you can get an adrenaline rush by climbing 
M a mountain, mountain biking, or perhaps inventing a new sport, such as 
parafishing or sewer snorkeling. But if you are reading this book, chances 
are you are sitting in front of your computer trying to create a Web site. If so, 
then we have an idea for the ultimate Web adrenaline rush: Dynamic HTML! 



Dynamic HTML, also known as DHTML, is techie talk for a useful and powerful 
set of technologies. It's the combination of HTML, Cascading Style Sheets 
(CSS), the Document Object Model (the DOM), and JavaScript. If you're using 
those four technologies together, you're writing DHTML. 

DHTML is like a printed document in which the DOM acts as the nouns, Java- 
Script as the verbs, CSS as the adjectives, and HTML as the paper itself. The 
individual parts are useful, but it's in combination that they become truly 
powerful. If you can put them all together, you can speak DHTML. 

In this chapter, we explore how to use DHTML and its component technolo- 
gies to bring active content to your Web pages. Specifically, we explore how 
to create rollovers, add dynamic content to your page, display pop-up win- 
dows, and tap into the power of cookies. 
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Adding Rottotfers to \lour Pages 

DBooks 

actuality. 



new to HTML, a rollover probably sounds like a pet trick. But, in 
actuality, a rollover is perhaps the most common use of DHTML on the Web. 
A rollover brings your Web page to life when a mouse hovers over an image 
or text. 



Image rottotfers tilth JavaScript 

If all JavaScript scripts went to school, the image rollover would certainly be 
the BMOC, the Big Man on Campus. It's definitely the most popular use for 
JavaScript. Without image rollovers, your image buttons look dull and drab; 
visitors to your site might even assume that your buttons aren't actually live 
links if those buttons don't change in some fashion when a cursor moves 
over them. But, with image rollovers, your pages let loose a dash of adrena- 
line with each mouse hover. 

Consider the two-states of the image rollover shown in Figures 15-1 and 15-2: 

IV Figure 15-1 shows a button in its inactive (off) state. 
v* Figure 15-2 shows the same button when the cursor is moved over it. 
That's the active (on ) state. 



3 JavaScript (mage Rollover - Microsoft Internet Exploi 



Hie Edt \few Favorites Tods Hefc 

O ' •; .2] '• ' : -■ : 4] h tto://''™.»xel mu/pages/ampeRollovet.html 



Figure 15-1: 

A very 
simple 
button. 
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Figure 15-2: 

A very 
simple 
button with 
the cursor 
over it. 
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Listing 15-1 shows the code for a JavaScript image rollover. 



Listing 15-1: JavaScript Image Rollover 



< ! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http://www.w3.org/TR/xhtml 1/ DTD/xhtml 1 -transi ti onal . d t d " > 
<html xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<ti tl e>JavaScri pt Image Rol 1 over</ti tl e> 

<meta http-equi v="Content-Type" content="text/html ; charset=IS0-8859-l" /> 
<script type="text/javascri pt" 1 anguage=" javascri pt"> 
function chglmgd'mgField.imgState) ( 

document[imgField] .src = "images/" + imgField + imgState + ".gif" 




</script> 
</head> 
<body> 

<a href="index.html " onmouseover="chgImg( 'homeButton' , 'On' )" 
onmouseout="chgImg( 'homeButton' , 'Off )"> 
<img src="images/homeButtonOff .gif" width="65" height="15" 
border="0" alt="Go Home" name="homeButton" /></a> 

</body> 
</html> 

The images subdirectory holds two separate image files with identical 
dimensions: 

I homeButtonOf f .gif appears when the button is in the off state (when 
the page loads). 

I homeButtonOn . gi f appears when the button is in the on state (when 
the cursor is over the button). 
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If you want to add JavaScript rollovers to your existing Web page, follow 
these steps: 

de on an attribute name for the rollover button. 

want to give each button a unique name. For example, if you have a 
an for an About page, you might call itaboutMeButton. Call a button 
:d to your Home page homeButton. 

2. Create your button images in your favorite image-editing application. 

You need two identically sized images for each button. 

3. Name the On and Off button image files with the attribute. 

For example, the aboutMeButton button needs two image files: 

aboutMeButtonOn.gif 
aboutMeButtonOff.gif 

4. Put the button image files into an images subdirectory under the 
directory of the page that will contain the rollovers. 

5. Add the JavaScript code in Listing 15-1 to your page. 

That's everything between (and including) the <scri pt> and </script> 
tags. It goes inside the <head> tags at the top. 

6. Add the off versions of each image to your page. 

7. Add the name attribute to each <i mg> tag on your page. 

8. Surround each <img> tag with an < a href> </a>tag. 

9. Add these event handlers to each <a h ref > tag: 

Add the following attributes to use homeButton: 

onmouseover="chgImg( 'homeButton' , 'On' )" 
onmouseout="chgImg( 'homeButton' , 'Off )" 

Next, add these attributes to use aboutMeButton: 

onmouseover="chgImg( 'aboutMeButton' , 'On' )" 
onmouseout="chgImg( 'aboutMeButton' , 'Off )" 

With this image rollover script, note the following behavior: 

i>* For dialup visitors to your Web site, this rollover script takes a moment 
to download the active image file the first time the visitor hovers the 
mouse over the image. 

However, you can preload the active states of your images; that is, tell 
JavaScript to load all the on versions of your buttons when the page ini- 
tially loads. This technique enables your page to instantaneously swap 
between images when rolled over. Listing 15-2 shows the added code to 
preload the images. 
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Recent versions of Microsoft Internet Explorer (5.x and 6.x) contain a 
bug that can make preloading ineffective. Under certain circumstances, 
^browser will ignore images already downloaded into your local 
ne and instead request the image all over again each time a visitor 
moves the mouse over the rollover image. If you encounter this prob- 
lem, consider a text rollover instead, which is discussed in the "Text 
rollovers with CSS" section later in this chapter. 

V This script depends on the buttons having particular names; if you want 
more flexibility, the code has to be written to handle it. 

This script causes trouble with certain ancient browsers, particularly 
Netscape versions 1 and 2 and Internet Explorer versions 1, 2, and 3. 



Listing 15-2: Enhanced JavaScript Image Rollover with Preloader 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http://www.w3.org/TR/xhtml 1/ DTD/xhtml 1 -transi ti onal . d t d " > 
<html xml ns="http: //www. w3.org/1999/xhtml "> 

<head> 

<title>JavaScript Image Rol 1 over</ti tl e> 

<meta http-equiv="Content-Type" content="text/html ; charset=IS0-8859-l" /> 
<script type="text/javascri pt" 1 anguage=" javascri pt"> 

//Preloads images 

if (document. images) { 

homeButtonOn = new Image 

homeButtonOff = new Image 

homeButtonOn. src = "images/homeButtonOn.gif" 

homeButtonOff .src = "images/homeButtonOff .gif" 

) 

function chglmgC imgFiel d , imgState) I 

document[imgField] .src = "images/" + imgField + imgState + ".gif" 

) 

</script> 
</head> 
<body> 

<a href="i ndex.html " onmouseover="chgImg( 'homeButton' , 'On' )" 
onmouseout="chgImg( 'homeButton' , 'Off )"> 
<img src="images/homeButtonOff .gif" width="65" height="15" 
border="0" a 1 1 = " G o Home" name="homeButton" /></a> 

</body> 
</html> 



Text rolloi/ers With CSS 

For years, the only option available for creating a rollover effect was to create 
button images and then "activate" them using JavaScript (as discussed in the 
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"Image rollovers with JavaScript" section previously). However, as CSS has 
finally gained acceptance with the newer versions of browsers, you have an 
k ve way to create rollovers without using any images at all. 



Text rollovers have advantages and disadvantages when compared to 
JavaScript image rollovers: 

f Good news: Text is faster and more meaningful to search engines, and 
it's always easier to just add text to a page than it is to create two 
images and then add them to a page, as with an image rollover. Plus, you 
don't need to worry about preloading your images. 

Bad news: Although you can control the text font, style, and border, you 
can't do all the nifty visual tricks that you can with images, such as anti- 
aliasing. In addition, this method works only in reasonably current 
browsers. (However, if your target viewing audience uses a browser that 
was released in this century, you should be fine.) 



Figure 15-3 shows a plain-Jane Web page with two rollover text links: Home 
and About Me. Moving the cursor over one of the images, as shown in Figure 
15-4, causes the rolled-over version of the text to display. Listing 15-3 displays 
the HTML and CSS required for this rollover effect. 

The page can still display whether you've visited the linked page or not. 
Figure 15-5 shows how the page appears after you've been to this site's home 
page. And although that image is grayed out, it's still a link, so rolling over it 
still gives the same effect as in Figure 15-4. 
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Home 
About Me 



Figure 15-3: 

A page with 
text 
rollovers 
handled 
with CSS. 
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Dl CSS Text Rollover - Microsoft Internet Explor 



File Edit View Favorites Tools Hefc 
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Figure 15-4: 

Moving the 
cursor over 
the link text 
changes the 
text and 
background 
colors. 



http://www.pinel.mu/psges/sboutMe.html 
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Figure 15-5: 

After you've 
been to a 
page, the 
link text 
color shows 
that the 
page was 
visited. 



Listing 1 5-3: A Text Rollover with CSS 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http://www.w3 . or g /TR/xhtml 1 /DTD/xhtml 1-transitional . d t d " > 
<html xml ns=" http : //www. w3.org/1999/xhtml "> 
<head> 

<title>CSS Text Rollover</title> 

<meta http-equi v="Content-Type" content="text/html ; charset=IS0-8859-l" /> 
<style type="text/css"> 

h4 (font: 18px geneva, sans-serif; margin: 0; color: #000; 
background: #FFF;| 

(continued) 
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Listing 1 5-3 (continued) 

a {text-decoration: none;) 
div#navbar (width: lOOpx;) 

div#navbar a |display:block; margin: 0; padding: 0.3em;| 
div#navbar a:hover (background: #FFF; color: #000;) 
div#navbar a:link (color: #000; background-color: transparent;) 
div#navbar a:link:hover (color: #FFF; background: #000;) 
div#navbar a:visited (color: #CCC; background-color: transparent;) 
div#navbar a : vi s i ted : hover (color: #CCC; background: #000;) 
</style> 
</head> 
<body> 

<div id="navbar"> 

<h4Xa href="index.html">Home</aX/h4> 
<h4Xa href="aboutMe.html ">About Me</aX/h4> 
</div> 

</body> 
</html> 

In this example, we've made the text change from black on white to white on 
black when the cursor hovers over the link so that it's easy for you to see 
what's going on in the black-and-white figures. You likely want your site to 
use a more colorful approach. 

Adding this type of navigation to your site couldn't be simpler: 

1. Within the <head> tags, add the preceding code (from Listing 15-3) 
inside and including the <styl e> and </styl e> tags. 

2. Add links inside individual <h4> tags. 

3. Make sure that the entire menu is inside a <di v> tag with an i d 
attribute of na vba r. 

If you add the CSS to your site via a link to a site-wide external style sheet 
(see Chapters 8 and 9 for more information on style sheets), you can add, 
change, or delete menu bar links on your site at any time without having to 
touch a single line of CSS or JavaScript. You simply add or modify your <a 
href > tags. Slick, huh? 

Displaying Dynamic Content 
an l/our Page 

Web pages can take advantage of JavaScript to change by themselves without 
requiring any user input or updating from the Web server. To demonstrate 
how JavaScript can do this, we create a simple clock that can automatically 
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update itself every second. We first show you how to do this using JavaScript 
and HTML and then how to do this an even better way using JavaScript and 



HTML and JavaScript 



You can create a JavaScript-enabled clock by using JavaScript and an ordi- 
nary HTML <i nput> tag. Listing 15-4 displays the code that you need to make 
this happen, and Figure 15-6 displays the results on-screen. 



Figure 15-6: 

This page 
displays the 
current 
time, 
updated 
every 
second, 
inside a text 
field. 



3 HTML Clock - Microsoft Internet Explor 
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The current time is 4:23:08 pm 



Listing 1 5-4: A Simple HTML and JavaScript Clock 

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http://www.w3.org/TR/xhtml 1/ DTD/xhtml 1 -transi ti onal . d t d " > 
<html xml ns="http: //www. w3.org/1999/xhtml "> 

<head> 

<title>HTML Clock</title> 

<meta http-equi v="Content-Type" content="text/html ; charset=IS0-8859-l" /> 
<script type="text/javascri pt" 1 anguage=" javascri pt"> 
window. onload = theClock 

functi on theCl ock( ) { 
now = new Date; 

theTime = ( (now.getHours( ) > 0 && now.getHours( ) 

< 13)) ? now.getHourst) : (now.getHourst) == 0) 
? 12 : now.getHours()-12; 

theTime += (now.getMinutes( ) > 9) 1 ":" + now.getMinutes( ) : ":0" 



(continued) 
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Listing 1 5-4 (continued) 
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document. myForm.myCl ock. value = theTime; 
setTimeout("theClock()",1000); 

) 

</script> 
</head> 
<body> 

<form a c t i o n = " # " name="myForm"> 
The current time is 

<input type="text" name="myCl ock" readonly="readonly" size="ll" /> 

</form> 
</body> 
</html> 

In Listing 15-4, the clock is updated inside a form text field so that JavaScript 
can write out to the page without having to reload the entire page every 
second. Wherever the text field is on your page, that's where the time 
appears. The clock shows the time set on the user's computer, not the time 
on the Web server that's serving the pages. 

To add this clock to your page, just 

1. Copy everything from the beginning <scri pt> tag to the ending 
</script> tag in Listing 15-4. 

The complete code listings for this book are available at www . dummi es . 
com/extras. 

2. Paste the code into the <head> section of your page. 

3. Add the <form> and <i nput> tags (including the name attribute on 
each) on your page where you want your clock to appear. 

The very first thing that JavaScript does when the Web page loads is set the 
window's onl oad event handler to trigger the theCl ock function. This is 
no big deal — unless you want to run another script when the page loads. 
However, this script is written in such a way that it never comes back to 
run anything else, since the clock is constantly updating itself. 



JavaScript and DOM 

When you add both JavaScript and some DOM manipulation to your page, 
you can update the text of the page itself, as shown in Listing 15-5. Figure 15-7 
shows a clock that updates every second, but it looks visually just like the 
rest of the text on the line. 



+ now.getMinutes( ) ; 

theTime += (now.getSeconds( ) > 9) 1 ":" + now.getSeconds( ) : ":0" 

+ now.getSecondst ) ; 

theTime += (now.getHours( ) < 12) ? " am" : " pm"; 
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Figure 15-7: 

This page 
displays the 
current 
time, 
updated 
every 
second, as 
simple text. 
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Listing 1 5-5: A Slightly More Complex JavaScript and DOM Clock 

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http://www.w3.org/TR/xhtml 1/ DTD/xhtml 1 -transi ti onal . d t d " > 
<html xml ns="http: //www. w3.org/1999/xhtml "> 

<head> 

<title>DOM-based CI ock</ti tl e> 

<meta http-equi v="Content-Type" content="text/html ; charset=IS0-8859-l" /> 
<script type="text/javascri pt" language="javascriptl.5"> 
window. onload = theClock 



function theCl ock( ) ( 
now = new Date; 



theTime = ( (now.getHourst ) > 0 && now.getHours( ) < 13)) ? 

now.getHours( ) : (now.getHours( ) == 0) ? 12 : now.getHours( )-12; 

theTime += (now.getMinutes( ) > 9) 1 ":" + now.getMinutes( ) : ":0" 

+ now.getMinutes( ) ; 

theTime += (now.getSeconds( ) > 9) 1 ":" + now.getSeconds( ) : ":0" 

+ now.getSecondst ) ; 

theTime += (now.getHours( ) < 12) ? " am" : " pm"; 

cl ockSpan = document .getElementByldt "myCl ock" ) ; 
cl ockSpan . repl aceChi ld(document . createTextNodet theTime) , 
cl ockSpan.fi rstChi Id) ; 



setTimeout("theClock( )" ,1000) ; 



(continued) 
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Listing 1 5-5 (continued) 
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<body> 

The current time is <span id="myClock">?</span> 

</body> 

</html> 



The script in Listing 15-5 is virtually identical to Listing 15-4, except for a 
couple of different lines of JavaScript. Using the DOM, the script can grab 
that text and replace it with new text every second. 



The good news: You can style that text with CSS and have it appear just 
like everything else on the page. The visual look is far superior to 
putting the dynamic text inside an <i nput> tag. 

V The bad news: Older browsers don't support the <span> tag, so if your 
visitors use legacy versions of Netscape or Microsoft browsers, consider 
using the HTML and JavaScript version instead. 



J ( 



Other examples in this book show the initial < s c r i p t > tag with the language 
attribute set to ja vascri pt. This particular script specifies javascriptl.5, 
which tells the browser to ignore everything that's going on if you aren't 
using a modern browser. If you come into this page with an older browser, 
you won't get an error, but you won't get the dynamic effects, either. 

To add the DOM-enabled scripted clock to your page, follow these steps: 

1. Add everything between the beginning and ending <scri pt> tags to 
the <head> section of your page. 

2. Add a <span> tag with an i d attribute of myCl ock anywhere on your 
page. 

The clock appears! 

Are you getting errors when you try to add the DOM-powered clock to your 
page? Some browsers have a problem with either nothing or a space in the 
<span> tag. Solution: As with the example shown in Listing 15-5, put some- 
thing (anything) inside the <span> tag for when it's initially loaded. In this 
case, there's a question mark, but it won't ever be visible to the Web page 
visitor. 



Displaying Pop-up Windows 



Pop-up windows are both one of the most useful and one of the most abused 
tools on the Web. Having a way to provide some extra information to site 
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visitors without making them leave a page is very useful. Unfortunately, so 
many unethical people have given pop-ups (particular advertising pop-ups) 
e that many Web surfers install pop-up blockers. Consequently, if 
op-up windows to your site, make sure that they aren't the only 
way that your visitors have of getting information. 



Figure 15-8 shows a simple pop-up window containing the clock from Listing 
15-5. This little window is a nice, floating, constantly updated clock that can 
stay up even after you've left the calling page. Listing 15-6 shows how to 
create this pop-up window, which is a new browser window that doesn't 
have an address bar, menu bar, scroll bars, status bar, or toolbars, as shown 
in Figure 15-8. 



Figure 15-8: 

Clicking the 
link opens 
a new 
browser 
window. 
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Listing 1 5-6: Opening a New Browser Window 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http://www.w3.org/TR/xhtml 1/ DTD/xhtml 1 -transi ti onal . d t d " > 
<html xml ns="http: //www. w3.org/1999/xhtml "> 
<head> 

<title>Window opener</ti tl e> 

<meta http-equi v="Content-Type" content="text/html ; charset=IS0-8859-l" /> 
<script type="text/javascri pt" 1 anguage=" javascri pt"> 
Tunction OpenWindow (newPage) { 

wi ndow.opentnewPage , "newWi n" , "width=200,height=50 , resi zabl e=yes" ) ; 

1 



(continued) 
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Listing 1 5-6 (continued) 

ript> 

Mi in c -"domCl ock. html " 

oncl i ck="0penWi ndow(thi s .href ); return fal se">0pen a new cl ock</a> 
</body> 

</html> 

The "Open a new clock" link, when clicked, calls a tiny JavaScript function 
that opens a new window that's 200 pixels wide, 50 pixels high, and resizable. 

Follow these steps to add this new window to your own site: 

1. Add everything from the beginning to the ending <scri pt> tags to 
the <head> of your page. 

2. In the body, figure out where you want the link to be. 

3. Add the oncl i ck event handler attribute to the <a h ref > tag around 
the text or image. 

You can have multiple links on the same page that each open a new window, 
and they can all have identical onclick handlers and call the same 
JavaScript function. 

The script is coded so that all the different bars are turned off. You can 
change the code so that the sizes are different or various fields either are or 
aren't displayed by varying the contents of the last field in the wi ndow . open 
function. Table 15-1 shows the valid entries for this parameter; just put them 
all, separated by commas (but not spaces), into a single string, and you get 
exactly the results you want. 

The default for every parameter is no, so there's no difference between set- 
ting an entry to no and just leaving it off entirely. 



Table 15-1 


JavaScript's Window Parameters 


Name 


Values (Default 
in Italics) 


Description and Value 


1 ocati on 


yes, no 


Should the new window display the loca- 
tion bar (also known as the address bar)? 


menubar 


yes, no 


Should the new window displaythe menu 
bars? (Applies only to Windows and Unix.) 
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Name Values (Default Description and Value 

in Italics) 



able yes, no Should the user be allowed to resize the 

new window? 

scrollbars yes, no Should the user be allowed to scroll the 

new window? 

status yes, no Should the new window display the 

status bar? 

toolbar yes, no Should the new window display the 

toolbar? 

height Numeric The height of the new window in pixels 

width Numeric The width of the new window in pixels 



Working With Cookies 



Every time we start talking about cookies, we are tempted to rush off to the 
fridge for a glass of milk and get ready for dipping. But then we remind our- 
selves that Web cookies, as useful as they can be, actually taste pretty bland. 
In fact, they taste far more like chicken than that famous Toll House recipe. 
Although they might not be tasty, you can still find cookies to be helpful as 
you create your Web site. 

A cookie lets you store information on visitors' computers that you can recall 
at a later time. Cookies can be one of the most powerful ways to maintain 
"state" within your Web pages. 

The code in Listing 15-7 reads and writes two cookies when a visitor loads 
the page: 

V pageHi t contains a count of the number of times the visitor has loaded 
the page. 

pageVisit contains the last date and time the visitor visited. 



Figure 15-9 shows how the page appears on the initial visit, and Figure 15-10 
shows how the page looks on subsequent visits. 
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Figure 15-9: 

The cookie 
knows 
you've 
never been 
to this page 
before. 
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Microsoft Internet Explorer 
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Visited this page 1 times. 
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Figure 15-10: 

The cookies 
know not 
only that 
you've been 
here before 
but when. 



File ErJt View Favorites Tools Hefc) 

O ' O " 3 IS] ■ *cc-ei-s [^http;//www.piiel.mu/pages/cookieScript.html 



You have visited this page 2 times. 

Your last visit was Sat Jan 8 16:36:53 PST 2005 



0 Internet 



Listing 15-7: Cookie-Handling Script 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http: //www. w3.org/TR/xhtml 1/ DTD/xhtml 1 -trans iti onal . d t d " > 
<html xml ns="http: //www. w3.org/1999/xhtml "> 
<head> 

<title>Cookie Demo</title> 
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<meta http-equi v=" Content -Type" 
<script type="text/javascri pt" 
new Date 
ireDate = new Date 
expi reDate.setMonth(expi reDate.getMontht )+6) 



content="text/html ; charset=ISO- 
anguage=" javascri pt"> 



-1" /> 



hitCt = parselnttcookieVal ( "pageHit" ) ) 
hitCt++ 

lastVisit = cooki eVal ( "pageVi si t" ) 
if (lastVisit == 0) ( 
lastVisit = "" 



document. cookie = "pageHi t="+hi tCt+" ; expi res=" + expi reDate.toGMTString( ) 
document. cookie = "pageVi si t="+now+" ; expi res=" + expireDate.toGMTStringO 

function cookieVal (cookieName) I 

thisCookie = document . cooki e.spl i t( " ; ") 
for (i=0; i <thi sCooki e. 1 ength ; i++) ( 

if (cookieName == thisCookie[i].split("=")[0]) { 
return thi sCooki e[i ] .spl i t( " = " ) [1] 



return 0 

1 

</script> 
</head> 
<body> 
<h2> 

<script type="text/ javascri pt" 1 anguage=" javascri pt"> 

document. writeCYou have visited this page " + hitCt + " times.") 

if (lastVisit != "") ( 

document. write( "<br />Your last visit was " + lastVisit) 

) 

</script> 
</h2> 

</body> 
</html> 

Unlike preceding examples, Listing 15-7 has a<script> section in both the 
head and the body: 

I Cookies are read and written in the header script when the page loads. 
The body script dynamically writes out the contents of the page itself. 
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Follow these steps to add the cookie-handling script to your page: 
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y both <scri pt> sections and put them into the appropriate parts 
>ur page. 

2. Change the <body> section to contain the text that you want the page 
to display. 

The lines inside the document . wri te ( ) statements write the text out to 
the document on the fly. 

^ coo ^ e nas an expiration date, after which it's no longer available. This 
^?/HSf «\<* example creates cookies that expire in six months. If you want your cookie to 
last more or less time, adjust the line in the JavaScript code near the top that 
sets the value of expi reDate. 
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Marvelous Miscellany 

You can use the (X)HTML <object> element to embed content inside a Web 
page. It provides a general mechanism to embed content of all kinds, from 
another text file to numerous types of active content, such as programs writ- 
ten in languages other than JavaScript (that works with the <scri pt> ele- 
ment, as you already know) and multimedia (such as Flash animations). 
This is advanced stuff for Web-page builders, so we list only object-related 
(X)HTML attributes in Table 15-2 and then conclude with pointers to details 
on using this element. 

If you want to use programming languages, such as Perl, Python, Java, and so 
forth, or various types of multimedia in your Web pages, you should cozy up 
to the <ob ject> element. 



Table 15-2 


Object-related (X)HTML Attributes 


Name 


Function/ 
Value Equals 


Value 
Types 


Related 
Elementfs) 


archi ve 


Identifies location 
(URI) for archive file 


URI 


<object> 


c 1 a s s i d 


Identifies object 
implementation URI 


URI 


<object> 
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Name 


Function/ 
Value Equals 


Value 
Types 


Related 
Elementfs) 


0 IcCSase 


Identifies base URI 


URI 


<object> 




for cl assi d. 








data, and archi ve 






codetype 


Identifies content 
type for code 


Media type 


<object> 



data 


Identifies object 
data by location 


URI 


<object> 


standby 


Specifies message 
that displays while 
object is loading 


Text 


<object> 


type 


Identifies content 
type for object data 


Media type 


<obje 


ct> 



The following resources address the (X)HTML <object> tag nicely: 

W3Schools offers (X)HTMLtag information online; <object> coverage 
includes links to a complete tag list at www .w3school s .com/tags/ 
tag_object .asp. 

f* Juicy Studio offers a detailed discussion of the <object> element at 
www . juicy stud io. com/tutor ial/html/object. asp. 

i>* In the HTML 4 Recommendation, the W3C includes "Objects, Images, 
and Applets" at www .w3 .org/TR/REC-html40/struct /objects. html. 
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In this part . . . 

In this part of the book, you can explore, understand, 
and see some typical Web page projects, including all 
the markup and underlying scripts, graphics, and other 
materials that go into their makeup. They're ready-to-use 
examples that you can edit or customize for your own 
needs and circumstances, so these projects are designed 
to function as templates of a sort that you can adapt and 
use as your own Web pages. 

Here, you find typical implementations of a personal Web 
page ("About me") and a company profile page ("About 
my company"). You also find an eBay auction page, a 
product marketing page, and a product catalog page that 
incorporates an honest-to-gosh shopping cart application. 
This is where everything in Parts II, III, and IV is put to 
work in useful, attractive Web pages that you can tailor 
for your own needs. 
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In This Chapter 

Deciding what your page needs to contain 
Analyzing your audience 
Building the page 
Using templates 



f 

■ t's time to build your very own page, one that tells the world who you are 
M and what you're like. 

You only get one chance to make a good first impression, and your site is 
how people all over the world can get to know who you are. So put your best 
foot forward and make your home page reflect exactly the image you want to 
project. 



0</er</ieu/ and Design Considerations 

Every Web site should start with a plan of its goals and intended audience, 
and a simple home page is no exception. Think about 

Who will visit the site 
What you want them to get out of it 
u* How often you want to update the site 
Content to include 

Audience analysis 

Your site will be your public face to the world, so analyze who you think will 
be visiting and what you want them to get out of a visit. For instance, a site 
that amuses and entertains your friends might be exactly what you don't 
want a prospective employer to see! 



296 PartV: HTML Projects 



Even if you don't give people the URL of your site, they're still likely to 
find it through search engines. Googling (searching the Web, particularly 
^«JGo«le.com) prospective employees and dates is more common than 
Ijbftp^^ou really want your parents and siblings, or your co-workers, to 
read all the details about what you did last weekend? 



Component elements 

At its simplest, a home page consists of nothing but a single HTML text file. 
If you're a great designer, that's sufficient. Chances are, though, that you'll 
want to add an image or two to give the site some visual interest. The two 
examples of home pages in this chapter each use three files: the home page 
and two small graphics. 



Paqe Markup 

After you have a template for a Web page (see the "Using HTML 4 For Dummies 
page templates" sidebar), just fill in the blanks. Include your content in new 



headings (< h 2 > tags in the following examples) and new paragraph 


's (with their 


corresponding <p> tags). 




\lour home page 




Listing 16-1 is the HTML code for a typical home page. Figure 16-1 


shows how 


it looks when displayed in a browser. 




Listing 16-1: A Home Page 




<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transi ti onal //EN" 




"http://www.w3.org/TR/xhtml 1/ DTD/xhtml 1 -transi ti onal . d t d " > 




<html xmlns="http://www. w3.org/1999/xhtml "> 




<head> 




<title>My Home Page</title> 




<meta http-equi v="Content-Type" content="text/html ; charset=ISO- 


8859-1" /> 


</head> 




<body> 




<hl><img src="crosskick.gif" alt="crosskick.gif" width="125" 




height="125" al ign="middl e" hspace='70" />Welcome to my home page! </hl> 


<h2>About me:</h2> 




<p>My name is Sean. I'm a high school student, and I'm interested in 
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math, science, and sports. </p> 
>Sites I like:</h2> 

y parents have a weblog: <a href="http://www. backupbrain.com"> 
ackup Brain</aX/p> 
<p>My cat has a Web site: <a href="http: //www. pixel . mu">Pi xel .mu</a></p> 
<h2>Send me email: <a href="mailto:sean@example.com"> 

img src="email .gif" alt="email .gif" width="60" height="60" 
align="middle" border="0" /X/aX/h2> 

</body> 
</html> 



This page is about as simple as it gets: There's no style information, no 
JavaScript, only two images, and not a lot of text. But it's enough to give 
you an idea of what kind of person put up the site and what he's like. 



Figure 16-1: 

A simple 
home page. 



3 My Home Page - Microsoft Internet Explor 



Fie Edit View Favorites Tools Hefc) 

O'O l?J l?] ■ • 4l) http://wA'A. p. lel.mu/pages A10me.html 



Welcome to my home page! 



About me: 

My name is Sean I'm a high school student and I'm interested in math, science, and sports. 

Sites I like: 

My parents have a weblog: Backup Brain 
My cat has a Web site: Pixel mu 

Send me email: 



This page contains two small graphics: 



*>*crosskick.gifisa simple image that adds a splash of color while hint- 
ing about the page owner's favorite sport. 

em a i 1 . g i f is a button that visitors can click. When a visitor clicks it, 
her e-mail client will pop up in a window with a preaddressed e-mail. 



It isn't hard to go from a super-simple site to a site that's considerably more 
attractive without getting horribly complex. Listing 16-2 and Figure 16-2 show 
a site with a lot more style and only a little more complexity. 
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1-^ <■ DOCTYPi 
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YPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 
"http://www.w3 . org/TR/xhtml 1/ DTD/xhtml 1 -transi ti onal .dtd"> 
ns="http: //www.w3 . org / 1 999 /xhtml ' 

<head> 

<title>My Home Page</title> 

<meta http-equi v="Content-Type" content="text/html ; charset=IS0-8859-l" /> 
<style type="text/css"> 

body (color: #000; background-color: #9C6;) 

hi {font: 48px "monotype corsiva", fantasy;) 

h2 Imargin-top: 20px; font: 20px "trebuchet ms", verdana, 

arial, helvetica, geneva, sans-serif;! 
p {margin-left: 20px; font: 14px/16px verdana, geneva, arial, 
helvetica, sans-serif) 
</style> 
</head> 
<body> 

<hl><img src="dancer . gi f " alt="dancer.gif" width="125" height="122" 

align="middle" hspace="20" />Welcome to my home page ! </hl> 
<h2>About me:</h2> 

<p>My name is Susan. I'm a high school student, and I'm interested in math, 

science, and sports. </p> 
<h2>Sites I like:</h2> 
<p>There's a good site about Web design at 

<a href ="http: //www. wise -women. org ">Wise-Women.org</aX/p> 
<p>My cat has a Web site: <a href="http: //www. pixel .mu">Pixel .mu</a></p> 
<h2>Send me email: <a href="mailto:susan@example.com"> 
<img src="emai 1 2 . gi f " al t="emai 1 2 . gi f " width="60" 
height="60" align="middle" border="0" /X/aX/h2> 

</body> 
</html> 

Text and tags within the <body> element are about the same as inside the 
first example, but the result is different because of the style rules in the 

<head>. 

The style rules set a background color for the page and specify the fonts to 
be used. Although the two pages have almost identical content, the latter 
page gives a much stronger impression of the person's individuality. 



Looking qood 

Adding cool fonts and bright colors to your page is a good way to add visual 
interest — but it makes your site look tacky if it's overdone. 
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Figure 16-2: 

Our less 
simple and 
more stylish 
home page. 



File Edit \tov Favontes Tools Heb 




; -Cl) tittp://v.'wm.»cel.mujt)3gesAioiiie2.hDnl 



'WeCcome to my dome page! 



About me: 

My name is Susan. I'm a high school student, and I'm interested in math, science, and sports 

Sites I like: 

There's a good site about Web design at Wise-Women.orq 
My cat has a Web site: Pixel. mu 

Send me email 







Follow these tips for a colorful, professional-looking page: 

V Pick a graphic and use its colors elsewhere on the page. 

The colors in the image of the woman in Figure 16-2 are used elsewhere 
on the page: 

• The background color of the image is the background color for the 
entire page (so the image's background blends into the page). 

• The color of her blouse is used as the color of the e-mail icon. 

*<" Check your page on other computers to make sure your colors really 
look the way you want them to look. 

Colors often appear differently on different monitors, and not everyone's 
monitor is set up correctly. 

Be selective when choosing fonts and font colors. 

• A font on your computer might not be on other computers. 
Give alternate fonts as a backup in your style rules. 

• Don't use too many different fonts on one page or it'll end up look- 
ing like a ransom note. 

• Use font colors that contrast with your background so people can 
read what you've written. 

Listing 16-3 is a bare-bones template with comments that tell you where to 
add your own content. Start with this, and where you end up is limited only 
by your imagination and creativity. 
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Y.PE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 
"http://www.w3.org/TR/xhtml 1/ DTD/xhtml 1 -transi ti onal . d t d " > 
ns="http: //www. w3.org/1999/xhtml "> 

<head> 

<title>My Home Page</title> 

<meta http-equi v="Content-Type" content="text/html ; charset=ISO- 
<style type="text/css"> 

body (color: #000; background-color: #FFF;) 

/* Add additional style rules here */ 

</style> 
</head> 
<body> 

<hl>Welcome to my home page ! </hl> 
<h2>About me:</h2> 

<!-- Add something here about you and your interests --> 
<h2>Sites I like:</h2> 

<!-- Add links here to sites that you like to visit --> 

<h2Xa href="mailto:yourName@example.com">Send me emai 1 ! </a></h2> 
</body> 
</html> 



-1" /> 



Using HTML 4 For Dummies page templates 



PartV of this book (Chapters 16-19) contains 
page templates designed specifically so that 
you can easily copy and modify them to suit 
your tastes. You can either 

Type them in yourself 

i"* Download them from www . dummi es . 
com/extras 



If you're looking for more templates, you can 
find great ones for copying, pasting, and adding 
your content in most WYSIWYG HTML editors. 
Chapter 20 covers these. 
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00 me eBay Auction Page 



In This Chapter 

Designing an online auction page 
Better ways to sell your auction items 
Template markup 



MM /nether you are trying to buy or sell a car, a rare CD, or a bologna 
ww sandwich that bears an uncanny likeness to Calvin Coolidge, eBay 
has become the 21st century's answer to the street marketplace. In fact, with 
more than 50 million active participants, eBay is sometimes referred to as 
"the world's garage sale." However, if these staggering numbers are leaving 
you starry-eyed over your expected profits, be careful: With millions of items 
for sale, it's easy for your "Coolidge-looking bologna sandwich" to get lost in 
the crowd. 

Given this reality, the more attractively your auction item is presented and 
the better the description is written, the greater the chances your item will 
sell and at a higher price. 

In this chapter, we show you how to effectively use HTML to make your eBay 
auction look wicked cool. You'll discover how to 

I V Highlight parts of your description. 
V Add pictures. 

Although eBay is the most popular online auction site, you can use HTML in 
your item descriptions on most other online auction sites as well, such as 
Half.com, Yahoo! Auctions, and ubid. 
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ction sites let you include a few specific elements in your auction 
item page, such as 

v 0 Title (and sometimes a subtitle) 
*<" Description 

This chapter focuses on the item description because that's where your 
HTML markup can enhance the look of the description and add pictures. 

Pictures 

Figure 17-1 shows an example of an auction description from eBay that uses 
HTML to add style and an embedded picture. 



Figure 17-1: 

This auction 
description 
uses HTML 
to style the 

text and add 
a centered 
picture. 



File Edt View Favorites Toots Heb 
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Description 

COSTUME GOLD & GLITTER EARRINGS FROM THE SOPRANOS! 

"THE SOPRANOS COSTUME GOLD EARRINGS" 




"THE EARRINGS" 

The item offered here is a pair of AUTHENTIC SHOW ISSUED Costume Gold Earrings from the popular 
series "The Sopranos," starring James Gandorfini, Lorraine Bracco, Edie Falco, and Michael Imperioli. 
This pair of Earrings was issued by wardrobe to the set for use by Cast Members. 

Done ^ C Internet 



Auction sites typically allow you to use a series of online forms to list items 
for sale. If you want to use HTML in your item description, you include the 
HTML markup in the text field the auction site gives you for the description, 
as shown in Figure 17-2. 
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Item aescnption * 







Figure 17-2: 

Entering 
HTML in the 
online 
description 
form field at 
eBay. 




Describe your items features benefits and condition. Be sure to include in your description. Condition (new 
used etc ) original price and dimensions or size. You may also want to include notable markings or signatures 
or its background history See more tips for Other 



Standard | Enter your own HTML 

ncw! Select Inserts from the drop-down list below to quickly and easily build your listing 
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<TABLE cellSpacing=0 cellPaddmg^S align=center bgColor=**ffffff border=7> 

<TBODY> 
<TR> 

=TD vAlign=top align=left width="1%"xBRxBRxA 

href="http://www o com/'ebay/lrVIG_1506 jpg"><IMG hspace=5 

src="http://www o com/ebay/IMG_1506 jpg" align=top border=0></A><BR><BR><A 

href="http://www o com'ebay/IMG_1507 jpg"><IMG hspace=5 

SfC="http://www o COm/ebay/IMG_1507 jpg" align=top border=Ox/Ax/TD> 

<TD vAlign=top align=left> 

<TABLE border=0> 

<TBODY> 

<TR> 

<TD align=left><FOrrr face- Times Hew Roman" color=#000000 size=6>SAS Pocket 
Survival Guide NEW!!!</FOrJTxyTD></TR><./TBODY></TABLE><BRxFONT face="Tim 
Mew Roman" color=#000000 size=3x/FONT><BR> 

^Ds/F|-lMTfar a ='Tim a c Ma,., Pnman" r nlnr=gn nimnn ei-7a = -l-»«-t.. Ha^ir, na e ,-rintinn ..VT 



P T.--H . -r,-.-- :. 1 1 1 ' i ! : :i 



Can't view our description editor'' Use this alternative 



Enter <p> to start a 



_ :■:■-!= 



eBay allows you to use HTML for style only in the item description; you can't 
use it in the title or subtitle lines. 

Because the auction site itself creates much of an online auction page, you 
don't have to create the entire page of HTML markup. You just need to create 
markup for the item description part of the page. That means that you 




f* Don't need to include the <html >, <ti tl e>, or <body> tags 
f* Can't include any scripts in the description 

When you create your auction item page, be aware that all browsers are not 
created equally 



v 0 If you use Microsoft Internet Explorer 6 as your browser, eBay gives you 
an HTML editor that allows you to style text directly and then turns it 
into HTML markup, as shown in Figure 17-3. 

Other browsers, including Mozilla Firefox and Safari on the Macintosh, 
display a simple text form in which to enter or paste your HTML 
markup. 
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Figure 17-3: 

Using 
e Bay's 
HTML editor 
to style your 
text in 
Internet 
Explorer 6. 



Standard Enter your own HTML 



Select nserts from the drop-down list below to quickly and easily build your listing. 



arr fr|HlSize~v] i Color " ! HQSi LjE 



Power Mac G4. 1 GHz Dual Processor, 768 MB RAM 

You are bidding on a Power Macintosh G4 "Quicksilver", Dual 1 GHz Processor, with 
an SO Gb hard disk and ~6S MB of RAM This was my primary desktop until I 
purchased a G5 tower a few months ago- It is in excellent condition. 

This machine includes: 

• Dual 1 GHz Power PC G4 processors 
. 80 Gb ATA 7200 hard disk 

• 76S MB of SDRAM 

• Nvidia GeForce 4 MX graphic card 

• Two 400 Mb sec Fire Wire ports 



Preview description 



Can't view our description editor? Use this alternative 



You can add pictures and themes on the next page 



When designing your item's title and description, don't immediately rush to 
add fancy HTML formatting. Instead, your first task is to create a description 
that effectively presents your product. Before you worry about the HTML 
markup, write a compelling title and description. Consider the following tips 
when you write your text: 

Write a great, descriptive title. A good title includes words that clearly 
and specifically identify what you are selling. eBay's search engine uses 
these titles to help people find your item, and you won't sell what 
buyers can't find. 

Look at completed listings to see successful descriptions. Use those 
ideas to stimulate your own. 

However, don't plagiarize other people's descriptions (or rip off their 
pictures). 

Spell words in the title and description correctly. Misspelled words 
will not be found by visitors searching for your item. 

In fact, we've bought equipment worth thousands of dollars for a frac- 
tion of its worth that got no other bids because the sellers misspelled 
the items' names in the auction title. 

Be sure that you're listing the item in the proper auction category. If 

you list it in the wrong category, your item will get lost, buried, 
obscured, masked . . . well, you get the idea. 

\S Resist the temptation to use large fonts and lots of styles. Buyers want 
to see your item description and photographs as quickly as possible. 
Keep your text and images direct, visually uncluttered, and to the point. 
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V Use good photographs. Items with pictures sell much better: 
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The photo of your item (more than one is usually better) should be 
sharp, with the item's important features clearly visible. 

Make sure that your image files are a reasonable size; buyers hate 
large photos that take a long time to load or that require scrolling. 




Use a photo-editing program to reduce the pictures that your digital 
camera or scanner produces to a smaller size and lower-resolution jpeg 
file. You want a size that loads quickly and can be viewed without 
scrolling, as discussed in Chapter 7. 

Avoid animation and music like the plague. Serious bidders click off of 
your item in a flash if you have either of these annoyances in your item 
description. 



Presentation Issues to Consider 

When you create your listings, remember that a variety of users will view 
your page using different browsers and operating systems. With that in mind, 
the following are some helpful tips for creating your listing: 

Design your page so it works with as many browsers as possible. Any 

Web browser may view your listing. (For example, you can't assume that 
your buyers have a browser capable of properly rendering CSS.) 

f" Use an appropriate font size. The font size that you use should be large 
enough to be legible at a variety of screen resolutions. Standard font 
sizes such as a 10- to 12-point font are good examples. Some buyers 
won't bother to read your item description if it is in a tiny font size. At 
the same time, don't make the font size too large. Large fonts can make 
your auction item page look amateurish. 

is* Don't use huge type that requires users to scroll the page a lot. For 

example, four headings that are all in a 48-point font would be way too 
much. 

is* Use backgrounds that don't distract your users from the text and 
images on the Web site. 

Avoid colored or patterned backgrounds because 

• People who are colorblind might have problems reading them. 

• Colored backgrounds can make your page hard to read when 
printed on a monochrome printer. (Many users print auctions for 
inventory records.) 

• They can make your page look amateurish. 




306 Part V: HTML Projects 



Using a Template for Presenting 
Drop&QQk&ion Item 

In this section, we provide a handy HTML template that enables you to dis- 
play pictures of your item alongside its description: 

A left column contains two pictures of the auction item. 

The example assumes that you're hosting the image files on a Web 
server that you control. You should prepare the image files and upload 
them to your server before you begin using the template. 

A right column contains text describing the item. 

Listing 17-1 shows the HTML markup for the auction item description. You 
can type it in any text editor, replacing the parts set off by the HTML com- 
ment tags with the appropriate information as indicated in the comment 
tag text. 

Listing 17-1: Auction Item HTML Template 

<!-- Begin Description Table --> 
<!-- Picture column --> 

<table al i gn="center" cellpadding="8" border="7" 
eel 1 spaci n g = " 0 " bgcol or="#FFFFFF"> 

<tr> 

<td valign="top" align="Left" width="ir><br /Xbr /> 

<!-- First picture goes below; replace URL with the location of your picture --> 

< i mg border="0" align="top" hspace="5" 

s rc="http:/ /www. exampl e. com/ images/ i ma gel .jpg" 
al t="Al ternati ve image text" /> 

<br /Xbr /> 

<!-- Next picture goes below; replace URL with the location of your picture --> 

<img border="0" align="top" hspace="5" 

src="http: //www. exampl e. com/ images/ i ma gel .jpg" 
a 1 t="Al ternati ve image text" /></td> 

<!-- Text column --> 

<td v a 1 i g n = " t o p " al i gn=" Left") 

<!-- This tabl e-wi thi n-a-tabl e for the headline makes your description 
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look better --> 
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order="0" > 

d align="Left" Xfont face="Times New Roman" col or="#000000" si ze="6"> 
Your Exciting Item Title Goes Here!</font> 

</td></tr> 
</table><br /> 




<p><font face="Times New Roman" col or= "#000000 " si z e = " 3 " > 
<!-- Begin Description --> 

Replace this text with the description of your auction item. 
<!-- End Description --> 

</fontX/p> 

<p><font face="Times New Roman" col or= "#000000 " s i ze= " 2 " > 
<!-- Enter your payment terms and details here. --> 

</fontX/p> 

<p><font face="Times New Roman" col or= "#000000 " si ze="2"> 
<!-- Enter your shipping terms and details here. --> 

</fontX/p> 

</td> 
</tr> 
</table> 

<!-- End Description Table --> 

In Figure 17-4, you can see the results of the preceding auction item descrip- 
tion template. We sold many copies of this item successfully on eBay. 

Many auction sites, including eBay, host pictures for your item — often for 
free. For example, eBay hosts one picture for free, but you pay for extra 
pictures. You might also consider looking into sites such as Andale (www . 
andal e .com) that offer image-hosting services for online auction sellers. 
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Figure 17-4: 

The 

template as 
it appeared 
on eBay. 





SAS Pocket Survival Guide 
NEW! ! ! 



The SAS Survival Guide is a compact pocket-sized version of the 
SAS Survival Handbook, a million-copy worldwide bestseller. 
Written by John "Lofty" Wiseman. This excellent book belongs in 
every backpack and in the preparedness kit that should be in the 
trunk of vour car. 

NO RESERVE! 

Seller reserves the right to refuse sale to bidders with negative feedback. 
Successful bidders with zero or low feedback numbers maybe subject to 
aditional venfka-jo:i. ?av:neni ir.u = : t e received "■- ichin " davs of auction 

US Postal Service money orders or PavPal accepted. 

Shipping and handhne for this item via USPS Pnotiry Mail is %i.50. 
I -.vill obtam and add to the tV.il pta :hi:e pace the cost of shipping 
:ems that sell for more than S100. 
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In This Chapter 

Deciding what your site needs to contain 
Including the basic parts of a Web site 
Separating content from presentation 
Building the site 



Companies large and small differ on their office dress policy — from being 
required to wear three-piece suits in the office to being allowed to work 
in a SpongeBob T-shirt and torn cutoffs. However, all companies, despite the 
differences in formality, want to present themselves effectively to the outside 
world. As such, they want their Web sites to reek of confidence, capability, 
and professionalism. No one feels good about handing over their hard-earned 
money to a company whose Web site looks cheesy and tacky (unless the 
company sells cheese and tacks). 

In this chapter, you explore the basics of creating a company Web site and 
look at the typical elements you want to utilize as you design your own com- 
pany's site. 

Issues to Consider When 
besiqninq \lour Site 

When you start to plan your company's Web site, the most important task 
is to consider the kind of people who are going to visit your Web site — 
potential or existing customers, clients, or partners. After you determine a 
list of the types of visitors, brainstorm about what they will want from your 
Web site. 
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Working with the concept of personas, in which you envision a few of the site's 
visitors and what they each want to get from the site, can be valuable. As you 
;ie site, think about how each of these imaginary people interacts with 
jgn. Will they find what they're looking for? 

If you are designing a site for a company that has many departments, you will 
discover that they have different goals. For instance, marketing wants the 
front page of the site to be a gigantic Flash animation showing all the com- 
pany's products, whereas management wants every page on the site to look 
exactly like a corporate brochure and to be identical in every browser known 
to man. 

Your job, as a Web designer and developer, is not only to design the site 
but also to educate people around you as to what is actually possible and 
feasible — while staying within a certain budget. 



Basic Elements of a Company's Web Site 

As you consider creating a company's Web site, keep in mind the following 
basic elements that you typically want to include in your site. Our site con- 
sists of six files: 

The initial Web page, i ndex . html , is the site's home page. It contains 
the basic marketing message about the company and its products. 

A site's home page can have any of a variety of file names, such as 
i ndex . html , def aul t . html , and home . html . You want to check with 
your Webmaster or your Web-hosting provider to determine the exact 
filename you should use. However, in general, the filename index.html 
will almost always work. 

The products page, products, html, contains summary information 
about each of the company's products. 

V The contact us page, conta ct . html , contains a form that the visitor 
can fill out in order to give his or her opinion to the company. 

i>* The press page, press.html, contains 

• Links to the press releases generated by the company 

• Information that marketing thinks members of the press might 
want 

This page isn't discussed in the rest of the chapter, but you can easily 
modify the basic HTML template discussed for the other site pages to 
create this unique page. 
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I W An image, bui 1 di ng . gi f , is displayed on the site's home page to give 
visitors the initial impression of the company and its site. This could be 



image, from a company logo to pictures of employees in action. 



le sheet, stylesheet.css, contains the formatting instructions for 
each page of the site. 

Every page links to this style sheet by using the < 1 i n k> tag. A change in 
this file changes the appearance of every page on the site. 



The home paqe 

Listing 18-1 shows the home-page markup for MegaCorp, our fictitious com- 
pany. Figure 18-1 shows how it looks when displayed in a browser. 



Listing 18-1: Our Company's Home Page (index.html) 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http://www.w3.org/TR/xhtml 1/ DTD/xhtml 1 -transi ti onal . d t d " > 
<html xmlns=" http://www.w3.org/1999/xhtml "> 

<head> 

<ti tl e>MegaCorp Home Page</title> 

<meta http-equi v="Content-Type" content="text/html ; charset=IS0-8859-l" /> 
< 1 ink rel="stylesheet" href="stylesheet.css" /> 
</head> 

<body> 

<div id="navbar"> 

<h4>Home ←</h4> 

<h4Xa href=" products .html ">Products</aX/h4> 

<h4Xa href="press.html ">Press</aX/h4> 

<h4Xa href -"contact. html ">Contact Us</aX/h4> 
</div> 

<div id="main"> 

<hl> 

<img src="building.gif" height="145" width="145" alt="0ur building" 

hspace=" 10" align="middle" />Welcome to MegaCorp 0nline</hl> 
<!-- Insert text for your company here --> 
</div> 

<div id="footer"> 

All contents of this site © 1999-2005 MegaCorp International, 

All Rights Reserved 
</div> 
</body> 
</html> 



As you look at the markup in Listing 18-1, you can see that it doesn't contain 
any information about colors, fonts, or how the page itself should be dis- 
played. All that information is in the style sheet, which allows the most flexi- 
ble approach to updating the site in the future. 
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Figure 18-1: 

Our 

company's 
home page. 
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http:.(.i".v,'w, . pixel. mu.ipages/index. html 



Welcome to MegaCorp Online 



Document-centric projections unfettered tradlti 
management. Advanced functionality, easy adi 
opportunity. 



Enterprise engendering accelerates initiative platforms, reducing staffing components, integration of 
technical accessibility, resulting in bottom line pluralisms, benefit-wise. Incidental re-sizing staff 
requirements through attrition can be accelerated by paradigm shifts and focusing on core suitability and 
cross-training. 



II contents of this site © 1999-2005 MegaCorp International, All Rights Reserved 



http://www.pinel.mu /pages/products, htm I 



The navigation used in the home page and for the other site pages is based 
on the text rollover example discussed in Chapter 15. These rollovers are 
simple, are fast-loading, and can be spidered (automatically searched for key- 
words) by search engines such as Google. They also degrade (they work even 
if they don't do the fancy stuff) nicely in older browsers. 



If you want to use this template for your home page, just 

If" Change the contents of the <ti tl e> and <hl> tags. 
V Add the company's description where the template shows the HTML 
comment "Insert text for your company here." 

A few slightly tricky things are going on in the navigation section (the part 
inside the <di v> with the i d of navbar): 

Each option is placed inside an <h4> tag, but only the last three are also 
within an < a > tag. That's because we don't want visitors to try to rollover 
and then click a Home link because they're already at the home page. 
Similarly, on each of the other pages, the link corresponding to the cur- 
rent page is disabled. 

The word Home on this page is followed by a leftward-pointing arrow 
(&1 a rr ;). That's another way of showing visitors which page they're 
currently on. 

u* The arrow and the word Home are separated by a nonbreaking space 
&nbsp ; . This special space keeps these two pieces in the same line, even 
if a browser is set oddly. 
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v 0 The navigation menu shown in Listing 18-1 and the text rollover menu 
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shown in Chapter 15 are slightly different — this one's modified to dis- 
each link the same whether the visitor has been to that page or not. 
can compare the two styles and use the one you prefer. 



Why use this type of navigation? Because it's simple to add, remove, or 
modify elements: 

n Delete a line of markup, and the other menu items move up to fill the gap. 

I v* Add a line with matching markup, and it automatically appears just as it 
should. 



The products paqe 

Listing 18-2 and Figure 18-2 show the company's products page and demon- 
strate how the overall look is the same, yet slightly different, for an interior 
site page. 



Listing 18-2: Our Company's Products Page (products.html) 



<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 




"http: //www. w3.org/TR/xhtmll /DTD/xhtml 1-transitional . dtd " > 




<html xml ns="http: //www. w3.org/1999/xhtml "> 




<head> 






<ti tl e>MegaCorp' s Products</title> 




<meta http-equi v="Content-Type" content="text/html ; charset=ISO- 


8859-1" /> 


< 1 ink rel = " sty 1 esheet " hreT=" 


stylesheet. ess" /> 




</head> 






<body> 






<div id="navbar"> 




<h4Xa href="index.html">Home</a></h4> 


<h4>Products ←</h4> 




<h4Xa href=" press .html ">Press</aX/h4> 


<h4Xa href=" contact .html ">ContacUnbsp;Us</aX/h4> 


</div> 




<div id="main"> 




<hl align="center">MegaCorp's Products</hl> 


<p>Say something here about your products</p> 


<ul> 




<1 1 > Product 1 goes here</li> 




<li>Product 2 goes here</li> 




</ul> 




</div> 




<div id="footer"> 




All contents oT this site © 1999-2005 MegaCorp International, 


All Rights Reserved 




</div> 




</body> 




</html> 
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Figure 18-2: 

Our 

company's 
products 
page. 
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MegaCorp's Products 



■energize your online nomenclature t( 



Upscaling the resurgent networking exchange solutions, achieving a breakaway system 
electronic data interchange system synchronization, thereby exploiting technical enviroi 
t = = ic - 3 1 :-:3d : = : a pa cor s:ra stems 



Fundamentally transforming well designed actionable informs 
virtually null. 

To more fully clarify the current exchange, a few aggregate 



In integrating non-aligned structures into existing legacy systems, a holistic gateway blueprint is a 

backward compatible packaging tangible of immeasurable strategic value in right-sizing conceptual 
frameworks when thinking outside the box. 

This being said, the ownership issues inherent in dominant thematic implementations cannot be 
understated vis-a vis document distribution on a real operating system consisting primarily of 
mpelling as a integrated out sourcing avenue to 
c components. 

In order to properly merge and articulate these core assets, an acquisition statement outlining the 
information architecture, leading 
an opportunity without precedent 

Implementing these goals requires a careful examination to encompass an increasing comple> 
sourcing disbursement to ensure the extant parameters are not exceeded while focusing on 
infrastructure cohesion. 



To use the template shown in Listing 18-2, perform the following steps: 

1. Customize the title, heading, and navigation bar for your page. 

2. Add descriptive text within the <p> that describes your products. 

3. Describe each product specifically within the individual <1 i > tags. 

You can add links to subpages from within the individual product descrip- 
tions. If you do this, use this page as a template for the individual product 
pages, but make sure the Products link is enabled in the navigation bar. That 
way, site visitors can retrace their steps back to where they came from with- 
out clicking the Back button. 



It's all greeked to me 



If you would like to mock up a page for which 
you don't yet have actual content, we recom- 
mend using greeked text. Greeked text'is place- 
holder text that typically starts with the Latin 
phrase "Lorem Ipsum." 



If you want to add greeked text to your page, 
check out www . 1 i psum . com, which will let 
you choose such options as the number of 
words, paragraphs, and bytes of greeked text 
you need. Then you can copy and paste the 
placeholdertext into your page. 
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The contact page 



le page allows visitors to the site to send their feedback directly to 
any. All it asks for is a name, an e-mail address, and the message to 
be sent, as shown in Listing 18-3 and Figure 18-3. 




Listing 18-3: Contact Our Company (contact.html) 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http: //www.w3 . org/TR/xhtml 1/ DTD/xhtml 1 -transi ti onal . d t d " > 
<html xml ns="http: //www. w3.org/1999/xhtml "> 

<head> 

<ti tl e>Contact MegaCorp</title> 

<meta http-equi v="Content-Type" content="text/html ; charset=IS0-8859-l" /> 
< 1 ink rel = " sty 1 esheet " href="stylesheet.css" /> 

</head> 
<body> 

<div id="navbar"> 

<h4Xa href="index.html">Home</aX/h4> 

<h4Xa href =" products. html ">Products</aX/h4> 

<h4Xa href="press.html ">Press</aX/h4> 

<h4>Contact Us ←</h4> 
</div> 

<div id="main"> 

<hl al i gn="center">Contact MegaCorp</hl> 
<h2>MegaCorp values your opi ni ons ! </h2> 

<form action="mailto:contact@example.com" method="post" enctype="text/pl ai n"> 
<p>Name: <input type="text" si z e = " 2 0 " /></p> 
<p>Email: <input type="text" si z e = " 2 0 " /></p> 
<p>Your message:<br /> 

<textarea name="Message" rows="10" col s="30"X/textareaX/p> 
<input type="submi t" value="Submit" />&nbsp ; 
<input type="reset" value="Reset" /> 

</form> 
</div> 

<div id="footer"> 

All contents of this site Xcopy; 1999-2005 MegaCorp International, 

All Rights Reserved 
</div> 
</body> 
</html> 

You could make the contact page considerably smarter by adding a little 
JavaScript that verifies whether valid information is entered into each of the 
fields. You want to make sure that 



A name was entered 



Some text was entered in the message <texta rea> field. 
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V Something resembling an e-mail address was given in the e-mail address 
field. (But there's no way to verify that the e-mail address belongs to the 
on filling out the form.) 




Embedding an e-mail address into the HTML markup like this is generally 
a bad idea. It works, but spammers usually find the e-mail address in the 
HTML file and abuse it. In the long run, it's smarter to use a Common Gateway 
Interface (CGI) that handles the address on the server side. See Chapter 14 for 
more information on forms handling or contact your Webmaster or Web host 
for assistance. 



Figure 18-3: 

Contacting 
our 
company. 
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The style sheet 

Listing 18-4 is a very basic version of a style sheet. All the HTML pages in this 
Web site reference this style sheet. The great advantage of using a style sheet 
to define your formatting instructions is that you can update this one file to 
give the whole site an entirely new look. 



Listing 18-4: The Site-wide Style Sheet (stylesheet.css) 

body {color: #000; background-color: # F F F } 

body, p {font: llpx/14px verdana, geneva, arial, helvetica, sans-serif) 

hi {font: Z4px "trebuchet ms", verdana, arial, helvetica, geneva, sans-serif) 
h2 {font: 20px "trebuchet ms", verdana, arial, helvetica, geneva, sans-serif) 
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h4 (font: 18px geneva, sans-serif; margin: 0; color: #000; 
background-color: #FFF) 
t-decoration: none) 




div#navbar (width: 120px; float: leftl 

div#navbar a (display:block; margin: 0) 

div#navbar a:link, a:visited (color: #000) 

div#navbar a:hover (color: #FFF; background-color: #000) 

div#main (width: 80%; float:right) 

div#footer (border-color: gray; border-width: 2px Opx Opx Opx; 

border-style: solid; color: gray; padding: 6px Opx lOpx Opx; 
display: block; float: none; clear: both; 
margin: 20px Opx Opx Opx) 

li (margin-bottom: lOpx) 

As shown in Figure 18-1 earlier in the chapter, the site's style sheet changes 
the menu items from white-on-black to black-on-white when the cursor 
moves over them. That works well for this book because it's in black and 
white. For a live Web site, change this to something a little less stark by 
changing the colors in the line that starts with di v#navbar a : hover. You 
can also modify the style sheet to change such attributes as 

\S The whole page background 
The navigation background color 
Fonts 
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In This Chapter 

Designing a product catalog 

Choosing a shopping cart 

Adding the PayPal shopping cart to your pages 

Example HTML templates 

••••••••••••••••••••••••••a 



■ n days gone by, a product catalog was a big production and investment. 
M Not only was the cost of producing a printed color catalog high, but send- 
ing it out to every George, Jerry, and Kramer out there in the world meant 
only the big companies could afford it. Unless your name was J. Peterman, 
J.C. Penney, or Eddie Bauer, you had no way to reach a broad audience with 
your catalog. 

The Internet, of course, changed all this. Now, whether you are part of a big or 
a small company, you can economically produce and maintain a professional- 
looking catalog on your Web site. And, without a significant investment, you 
can even sell directly to your customers from an online store. 

This chapter covers the basics of creating a product catalog and selling your 
goods on the Web. 



Dissecting a Product Catalog 

A product catalog usually includes these components: 

i>* A navigation interface to help the user move easily through the catalog. 

The navigation interface is normally a menu system. Navigation inter- 
faces are discussed briefly in Chapter 3. 
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is* At least one category page, with several items listed in each category. 

Choosing a category from the menu system brings the user to a category 
, which identifies individual items with 



Thumbnail images 

• A brief description 

The image and title of an item are linked to that item's detail page. The 
user clicks the link for detailed information about an item. 

The site may allow the user to purchase items from the category page. 
(Some sites require purchases from the item's detail page.) 

v 0 A detail page for each item in the catalog, which usually displays 

• At least one large image of the item. 

• A detailed description of the item. 

• A button that adds the item to the site's shopping cart, if the site 
allows purchases. (This chapter covers shopping carts later.) 



Design basics 



Whether you se//directly to online buyers or just 
s/joi/i/your retail store's inventory, keep these 
design principles in mind: 

Keep your catalog clean. Your online store 
should encourage users to browse. Users 
should see many items quickly and easily 
get more detail on items that interest them. 

Make your site design colorful, interesting, 
and fun. (But keep the size of the graphics 
as small as possible — less than 30k per 
photo — so pages download quickly.) 

Make it easy to get around. Your site navi- 
gation should be easy, logical, and obvious. 
If site visitors find interesting items quickly, 
they buy. Otherwise, they lose interest and 
find what they want elsewhere. 



Provide detail. Visitors can't see or touch 
the item, so printed detail is a must. There 
aren't any space limitations on the Web 
(unlike a printed catalog), so you can include 
all the detail users might want on an item. 
(Information about shipping charges, returns, 
and contact should be easy to find, too.) 

f" Make buying easy if you're selling. Stream- 
line the buying process as much as possi- 
ble. An online purchase shouldn'ttake more 
than three screens. You'll make more sales 
and gain repeat customers. 

An amazing number of online stores use 
shopping cart software that seems posi- 
tively user-hostile. Buyers must fill out page 
after page of selection and confirmation 
screens before completing the sale. 
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This chapter's example of a product catalog uses the following resources: 
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templates for the product catalog: 

A category page with small images of items within that category 
• A detail page for one example item 
i>* The navigational menu system 



Figure 19-1 shows an example category page for a fictional outdoor equip- 
ment store, Adventure Tools. Site visitors can click either the thumbnail pic- 
ture of the item or the item's name to go to the item's detail page. 

After a visitor clicks an item in the category page, the item detail page appears, 
as shown in Figure 19-2. This page contains the all-important Add to Cart 
button, which allows the visitor to purchase the item. 



Figure 19-1: 

A category 
page from 
the online 
catalog. 
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should be lightweight, rugged, and incredibly useful. With our gear and your knowledge, you can 
be independent and comfortable anywhere in the world. 





Global Survival Kit 
$59.95 



Walkabout Survival Kit 
$179.95 

The core item in our Walkabout Survival Kit is oui 
Global Survival Kit, with proven tools for most 
survival situations. We've added to the capabilitie 
of the GSK by adding more tools for shelter, 
cooking, and comfort. 



J My Computer 
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Figure 19-2: 

An item 
detail page. 



Global Survival Kit 




Fifteen ounces that can save your life. Cookpot, knife, & eighteen other serious tools in a pocketable 
package. This kit contains the tools you need to survive in the outdoors in a pinch. But it's not just for 
emergencies; using the items in the kit before you get in a bind will help you use them better when you 
really need them. Because the kit measures only 5 7/8 by 4 inches (14.9 by 10.2 cm), it's easy to 
carry. The Global Survival Kit includes: 















Stainless Steel Survival & Cooking 
Box 




Waterbag 




Hacksaw Blade 
Dental Floss 


• 


Box Lid (use as signal mirror) 




Water Purification 




Nylon Cord 


• 


Knife (Outdoor Edge Wedge) 




Tablets 


• 


Food Kit 


• 


Whetstone 


• 


Snare Wire 


• 


Bonay Tea Bags 


• 


Compass 


• 


Fishing Kit 


• 


Instructions 




Rescue Whistle 




First Aid Kit 
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Magnesium Sparker and Tinder 




Needle and Sewing Kit 







$59.95 

[ Add to Cart] 



Choosing a Shopping Cart 

If you want people to purchase from your site, you need a shopping cart. The 
cart allows buyers to purchase items and pay for them (usually with a credit 
card or a bank account transaction). 

The shopping cart software (which runs on a Web server) leads the buyer 
through the steps of buying a product online: 

1. The buyer selects an item and adds it to the shopping cart. 

2. If the buyer wants to shop for other items, he or she can continue shop- 
ping and place other items in the shopping cart. 
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3. When ready to purchase, the buyer chooses to move to the checkout 
process. 

, the shopping cart software 
the purchases 

• Adds shipping costs (if necessary) 

• Leads the buyer through the payment process of entering such 
details as a credit card number and shipping address 




In concept, a shopping cart for an online store is fairly simple. But in execu- 
tion, it can get complex. This chapter surveys only the basics of e-commerce. 
If you are going to dive into it fully, we recommend these books: 



Starting an Online Business For Dummies (Wiley) 
W MySQL/PHP Database Applications (Wiley) 
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heckout 
Totals 



PayPal 

In this chapter, we focus on using the shopping cart from a well-known 
e-commerce site, PayPal. Owned by eBay PayPal's shopping cart is free for 
you to use on your Web site. Your customers can purchase multiple items 
with a single payment, and you can accept credit card and bank account pay- 
ments. (PayPal charges you a transaction fee when you receive a payment.) 




PayPal offers a button generator that takes information about the name and 
price of an item you have for sale and creates HTML markup for an Add to 
Cart button that you then insert directly into your product catalog page. 

This button generator and the PayPal shopping cart require a PayPal Premier 
or Merchant account. (PayPal Personal accounts can't accept debit or credit 
card payments; they just send and receive transfers from bank accounts.) 



Other e-commerce solutions 

PayPal is one of the easiest shopping carts to implement on your site, but 
many others are available. 




The following technologies require a more serious business and financial 
commitment to setting up your online presence. 



Hosting e-commerce sert/ices 

Hosted e-commerce services let you build an online storefront on your site 
^"lu^^^e service provider deal with the technical aspects of your store and 
VranSeMlon processing. 

A good example of the online storefront service is Yahoo! Merchant Solutions 
(http;//smal 1 business, yahoo, com /merchant). You can create a storefront 
hosted on a Yahoo! server with such features as your own domain name, a 
product catalog, site-building tools (that let you avoid using raw HTML if you 
want), a secure shopping cart, e-mail order confirmations, integration with UPS 
for shipping, and order statistics tools. An online store on Yahoo! is fairly easy 
to set up and operate, especially if you're more merchant than Web developer. 
Prices start at about $40 a month. 

Do-it-yourself software 

If you are really a technical guru and aren't faint of heart, you can install full- 
featured shopping cart software on your own Web server and configure it 
manually. 

If you choose this option, you need the technical know-how, a Web server, 
and constant Internet connection for hosting your e-commerce Web site. 

One do-it-yourself shopping cart software package is Zen Cart (www . zen - 
cart . com). It's a free, open-source shopping cart written in PHP. Stores cre- 
ated with Zen Cart are almost infinitely customizable and have many useful 
features, such as allowing customer reviews of your products and the ability 
to customize tax and shipping rates for everywhere you sell your items. 

If you use Zen Cart, you should expect to spend at least a few days setting up 
your store before you're ready for business. You need to know how to upload 
and install the Zen Cart software on your server, how to rename files and set 
Unix permissions on your server, and how to create a MySQL database. Then 
you need to create or modify the page templates for your store and set up 
many other server-side parameters. 

In general, we recommend you stick with PayPal or a hosted e-commerce 
solution to avoid the complexity of trying to do it all yourself. 



Incorporating a PayPal shopping cart 

Creating the HTML markup for the shopping cart is easy; use the PayPal site's 
button generator, and then copy and paste the markup into your Web page. 
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j^j^BE^ To use the PayPal shopping cart, you must be a PayPal Premier or Merchant 
account holder. After you have an account established, you can create your 
to Cart button and View Cart button by performing the instructions 
the following sections. 



account n 




Add to Cart button 

Follow these steps to insert an Add to Cart button on your page: 

1. In your Web browser, go to the PayPal site: https : //www . paypal . com. 

This site is secure, so all transactions are encrypted between the site 
and your browser. 

2. Log in to your Premier or Merchant account. 

Your account overview appears, as shown in Figure 19-3. We blur out the 
name and e-mail for security reasons. 




J Add Funds | Withdraw [ History | Resolution Center | Profile 



Figure 19-3: 

Logging in 
to your 



PayPal 
account. 





Activate Account 


U.S. Premier Account Overview 




J±_ Add auction 


Name: 




account 


Email: f Add emaill 






Status: Verified '35 



3. Click the Merchant Tools tab. 

4. On the Merchant Tools page, click the PayPal Shopping Cart link. 

5. On the PayPal Shopping Cart page, fill out the information about the 
item you want to sell, as shown in Figure 19-4. 

You must enter the item name, the price, and the currency you accept. 
An item number (used in reports that PayPal provides for you after the 
sale) and the default country for the buyer's payment form are optional 



Figure 19-4: 

Enter your 
item's 
information. 



Enter the details of the item you wish to sell (optional) 



Item Name/Service: Qoba | Surviua | Kit 



Item ID/Number: ^TCGI 

(optional) 



Price of Item/Service 
you want to sell: 



($2,000.00 USD limit for new buyers) B 
Currency: U.S. Dollars v Q 



If you want your buyer's payment form to default to a specific country, select a country below. 
Otherwise, dc nothing and ycur buyers can cheese for themselves. 



Buyer's Country: 

(Optional) 



□ 
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6. In the Select an Add to Cart Button section, click to select the button 
style shown, as in Figure 19-5. 



Figure 19-5: 

Select the 
Add to Cart 
button style 

you prefer. 



Select an Add to Cart button 

Your customers will use the image you select below to add items to their shopping cart 
before they checkout. 

0 [ Add to Cart"] Choose a different button 

Or customize your button! Just enter the exact URL of any image on your website. 
O Yes, I .vould like to use my own image 
Button Image URL: http:// 



If you don't like the style shown, click the Choose a Different Button link 
to pick a different button style. 

You can create a button image and use it with the PayPal shopping cart: 

a. Create the button graphic in an image-editing program. 

b. Upload the graphic to a Web server. 

c. Select the Yes, I Would Like to Use My Own Image radio button on 
the PayPal Shopping Cart page. 

d. Fill in the URL for the graphic on your Web server. 

7. Click the Create Button Now button at the bottom of the page. 

8. On the Add a Button to Your Website page, select all the text in the 
Add to Cart Button Code field (as shown in Figure 19-6), and then 
choose EditOCopy in your browser. 



Add a button to your website 



Copy your custom HTML code 

The HTML code below contains your "Add to Cart" button. Copy the code and paste it 
^^^^^^^^H into onto your webpage. When your customers press the buttons they will be taken to 
a webpage listing the items they have added to their cart. 

Figure 19-6: ^ 



Copying the 
Add to Cart 
button code. 




9. Switch to your HTML page editor and paste the cart code where you 
want the button to appear, as in Figure 19-7. 
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10. Save and preview the HTML page you just modified in your Web 
browser to see the button on the page, as shown in Figure 19-8. 



Figure 19-8: 


• Compass 

• Rescue Whistle 

• Magnesium Sparker and Tinder 


• Fishing Kit 

• First Aid Kit 

• Needle and Sewing Kit i 


• Instructions 

• Mesh Bag 


The 








completed 




$59.95 




Add to Cart 








button on 




[ Add to Cart ) 




the page. 










View Cart j 





View) Cart button 

If you add a View Cart button on your page, as shown in Figure 19-8, follow 
these steps: 

1. Go to the PayPal Add a Button to Your Website page. 

This HTML markup was generated at the same time as the Add a Button 
HTML markup. 

2. Select all the text in the View Cart Button Code field. 

3. Copy and paste the code into your HTML page. 

Page Markup 

Listing 19-1 includes the markup for the category page. 
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Listing 1 9-1 : Category Page Template 

I— V 1-^ <■ DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

1 jrr\ JT} riC}C} K ^'' http://www ' w3,or9/TR/xhtmll/DTD/xhtmll_transitional • dtd " > 
I— ^ I KJ I—/ \J w<lttlVllns="http://www.w3.org/1999/xhtnil"> 

<head> 

<title>Your Title Here</title> 

<meta http-equi v="Content-Type" content="text/html ; charset=IS0-8859-l" /> 
<!-- External stylesheet for the menu system --> 
<link rel="stylesheet" href="menu.css" /> 
<!-- Stylesheet for this page --> 
<style type="text/css"> 

body (color: #000; background-color: #FFF;) 

body, p {font-family: tahoma, verdana, arial; font-size: 1 2px ; ) 

hr (color: #369; height: Ipx) 

hi (font: 24px "trebuchet ms", verdana, arial, helvetica, geneva, 
sans-serif; ) 

h2 (margin-bottom: Opx; margin-top: Opx; font-size: 18px; color: 

#DBEAF5 ; ) 
.darkline (background: #4682B4;| 

.cright (font-family: Tahoma, Verdana, sans-serif; font-size: 12px; 

color: #FFF; background: #4682B4; text-align: right;) 
body , p (font: llpx/14px verdana, geneva, arial, helvetica, 

sans-serif; ) 
. sty 1 el (font-size: 14px;| 
</style> 
</head> 

<body bgcolor="#ffffff"> 

<!-- External script references for the menu system --> 

<script 1 anguage="JavaScri pt" src="menu. js" type="text/javascri pt"X/scri pt> 

<script 1 anguage="JavaScri pt" src="menu_items.js" 

ty pe=" text/ Java s c ri pt"X/scri pt> 
<script 1 anguage="JavaScri pt" src="menu_tpl . js" type="text/javascri pt"X/scri pt> 
<script 1 anguage="JavaScri pt" type="text/javascri pt"> 
<!--// 

new menu (MENUJTEMS, MENU_P0S, MENU_STY LES ) ; 

//--> 
</script> 

<div style="height: 50px; "> </div> 

<!-- Enter your logo image and category headline below. --> 

<hl align="left"Ximg src="yourlogo.gif" al t="Al ternati ve text" hspace=" 10" 

align="middle" />Your Headline </hl> 
<p align="left" class="stylel"> 

<!-- Replace this comment with a description of the category. --> 
</p> 

<p align="left" class="yourstyle"> </p> 

<table width="642" height="352" border="0" align="left"> 

<tr> 

<!-- First item picture --> 
<td width="300" height="204"Ximg src=" i temlsmal 1 . j p g " 
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alt="Alternative text" al ign="bottom" /></td> 
<td width="28"> </td> 

-- Second item picture --> 

idth="300"Ximg src="item2smal 1 . jpg" alt="Alternative text" 
al i gn="bottom" /></td> 
</tr> 
<tr> 

<td hei ght="35"Xhl al i gn="center">Item 1 Name</hl> 

<hl al i gn="center">Item 1 price</hl> 

<p align="left">Item 1 short description. </p></td> 

<td> </td> 

<td hei ght=" 35 " > 

<hl al i gn="center"Xbr />Item 2 Name</hl> 

<hl al i gn="center">Item 2 price</hl> 

<p align="left">Item 2 short description. </pX/td> 

</tr> 

</table> 
<p>&nbsp ; </p> 
</body> 
</html> 

Listing 19-2 includes the markup for the detail page template. 



Listing 19-2: Detail Page Template 

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transi ti onal //EN" 

"http://www.w3.org/TR/xhtml 1/ DTD/xhtml 1 -transi ti onal . d t d " > 
<html xml ns="http: //www. w3.org/1999/xhtml "> 

<head> 

<title>Your Page Title Here</title> 

<meta http-equi v="Content-Type" content="text/html ; charset=IS0-8859-l" /> 
<!-- External stylesheet for the menu system --> 
<link rel="stylesheet" href="menu.css" /> 
<!-- Stylesheet for this page --> 
<style type="text/css"> 

body (color: #000; background-color: #FFF;) 

body, p {font-family: tahoma, verdana, arial; font-size: 12px;) 

hr (color: #369; height: lpx;| 

hi (font: 24px "trebuchet ms", verdana, arial, helvetica, geneva, 

sans-serif; ) 

h2 ( margin-bottom: Opx; margin-top: Opx; font-size: 18px; color: 

#DBEAF5; ) 
.darkline ( background: #4682B4;| 

.cright (font-family: Tahoma, Verdana, sans-serif; font-size: 12px; 

color: #FFF; background: #4682B4; text-align: right;) 
body.p (font: llpx/14px verdana, geneva, arial, helvetica, sans-serif;) 
. sty 1 el (font-size: 14px;l 
</style> 



(continued) 
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Listing 19-2 (continued) 



color="#ffffff"> 

External script references for the menu system --> 
1 anguage=" JavaScri pt" src="menu . js" ty pe=" text/ Java scri pt"X/scri pt> 
<script 1 anguage="JavaScri pt" src="menu_items.js" 

type="text/javascript"X/scri pt> 
<script 1 anguage="JavaScri pt" src="menu_tpl . js" 

ty pe=" text/ Java scri pt"X/scri pt> 
<script 1 anguage="JavaScri pt" type="text/javascri pt"> 
<!-// 

new menu (MENU_ ITEMS, MENU_P0S, MENU_STY LES ) ; 

//--> 
</script> 

<div style="height: 50px;"> </div> 
<hl align="left"> 

<!-- Add your logo and headline below. --> 
<img src="yourlogo.gif" al t="Al ternati ve text" hspace=" 10" 

align="middle" />Your Headline Here</hl> 
<!-- Begin detail table --> 

<table width="604" hei ght=" 352 " border="0" align="left"> 

<tr> 

<!-- Add your item's detail picture here. --> 

<td width="598" hei ght="204"Xdi v align="center"Ximg src="item-pic. jpg" 
al t="Al ternati ve text" align="top" /X/divX/td> 

</tr> 
<tr> 

<td height="35"Xp align="left"> 

<!-- Replace this comment with your item description. --> 
</p> 

<hl al i gn="center">Repl ace with your item's price. </hl> 
<hl al i gn="center"> 

<!-- Begin PayPal Add to Cart button code --> 

<!-- Replace this comment with the pasted Add to Cart button code. --> 
<!-- End PayPal Add to Cart button code --> 
<!-- Begin PayPal View Cart button code --> 

<!-- Replace this comment with the pasted View Cart button code. --> 
<!-- End PayPal View Cart button code --> 

</hlX/td> 

</tr> 

</table> 

<p> </p> 

</body> 

</html> 
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"As. a Vleb site designer 1 never thought 
I'd sa^ iVus., but J don't think your 
site has enough bells and vjVvistles." 
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In this part . . . 

1 1 ere we point you at some undeniably cool HTML 
M. M. tools, cover top do's and don'ts for HTML markup, 
and help you catch potential bugs and errors in your Web 
pages. With our tongues planted firmly in our cheeks (that 
makes it kind of hard to talk, you know), we try to recap 
some of the most important advice and information in this 
book. Enjoy! 
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In This Chapter 

Identifying your HTML toolbox needs 

Discovering your favorite HTML editor 

Adding a graphics application to your toolbox 

Authoring systems for the Web 

Understanding essential utilities for Web publishing 



B^TML documents are made of plain old text. You can make one with a 
▼ m basic text editor like Notepad. Once upon a time, that was all Web 
authors used. 

As the Web has evolved, so have the tools used to create Web pages. 
Nowadays, Web authoring is so complex that a simple text editor is a big 
headache unless 

(1 You don't care about graphics and HTML validation. 

You're on a quick in-and-out mission to make small changes to an exist- 
ing HTML document. 

As you get more experience with HTML, you'll build your HTML toolbox. This 
chapter helps you stock that toolbox. Some of these tools may already be on 
your system, quietly waiting to help you create amazing Web pages. 

When you go shopping for items for your HTML toolbox, look for good buys. 
Students and educators often qualify for big discounts on major-brand soft- 
ware, but careful shopping can save on just about any software purchase. Try 
comparison-shopping at sites like CNET Shopper (www .shopper . com) or PC 
Magazine (http : //pcmag . shoppi ng .com). 
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HTML Editors 
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explains how to create and maintain (X)HTML pages with nothing 
more complicated than a pocketknife and a ball of string. But HTML editors 
can turn the chore of creating complicated (X)HTML pages into an easy task. 

HTML editors come in two flavors. The flavor you need depends on the com- 
plexity of the Web page you are creating or editing. 

V Helper editors have fewer capabilities. 

WYSIWYG (what you see is what you get) editors do everything but 
your laundry. 



Helper editors 





An HTML helper works like it sounds. It helps you create HTML, but it doesn't 
do all the markup work for you. 

In a helper, HTML is displayed "raw" — tags and all. You can reach right into 
the code and tweak it (if you have HTML 4 For Dummies). 

But good helpers save time and lighten your load. Functions like these make 
HTML development easier and more fun: 

IV Tags are a different color than content. 
V The spell checker knows tags aren't misspelled words. 

Use a helper editor when you're building complex tables or multilevel lists. 
The more complex your markup, the more help a helper editor can provide! 

HomeSite*: The champ 

HomeSite+ is an HTML editor suitable for both beginners and professionals. It 
requires HTML knowledge to use, but it assists you at every step. 

If you have Macromedia Dreamweaver MX, you have HomeSite+ (www . 
ma cromedi a . com /software). 

We like the HomeSite+ interface. You can 

Browse images directly in the editor. 

Customize the toolbars and menus for your personal needs. 
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I Create a browser view instantly by clicking a tab. 

Move and use context menus with a right-click of your mouse. 




sy to enhance and modify with 

W Color-coded HTML 

u* Integrated spell checker 

f Search-and-replace tools to update whole projects, folders, and files 
W Internal HTML validation 

t<«* Extensive online help with accessing documentation on HTML and other 
popular scripting languages 



HomeSite+ helps you perform 

V 0 Project management 

Link verification 
V File uploads to a remote Web server 

If you don't have HomeSite+, try one of the following challengers as your 
helper editor instead. 

Contenders 

There are many more good HTML helper editors than there are good WYSI- 
WYG editors. Here's our slate of alternatives. 

BBEdit 

BBEdit rules the Macintosh world. It comes in two versions: 




i>* The free product formerly known as BBEdit Lite is still free, but has been 
superseded by a newer, free text editor called TextWrangler. 

BBEdit ($200 retail) 

If you don't need the powerful and specialized set of HTML editing, pre- 
view, and cleanup tools of BBEdit, use TextWrangler and save! (A detailed 
features comparison that also includes BBEdit Lite is available online at 

www .barebones.com/products/bbedit/threeway.sht ml.) 

If you use a Macintosh, check BBEdit out at www . barebones . com. 
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HTML-Kit 



_~ HTML-Kit 
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-Kit is a compact Windows tool with 



u-driven support for both HTML and Cascading Style Sheets (CSS) 
markup 

A nice preview window for a browser's-eye view of your markup 
If you want to download HTML-Kit, go to www . chami .com/html - ki t. 



WySlWVG editors 




A WYSIWYG editor creates HTML for you as you create and lay out Web page 
content on your computer display (often by dragging and dropping visual ele- 
ments, or working through GUI menus and options), shielding your delicate 
eyes from naked markup along the way. These tools look much like word 
processors or page-layout programs; they do a lot of the work for you. 

WYSIWYG editors make your work easier and save hours of endless coding — 
you have a life, right? — but you should only use WYSIWYG editors in the ini- 
tial design stage. For example, you can use a WYSIWYG editor to create a com- 
plex table in under a minute and then use a helper to refine and tweak your 
HTML markup directly. 

bream utetu/er: the champ 

Dreamweaver is the best WYSIWYG Web development tool for Macintosh 
and PC systems. Many (if not most) Web developers use Dreamweaver. 
Dreamweaver is an all-in-one product that supports 

Web site creation 
Maintenance 
Content management 

The current version is Dreamweaver MX 2004. It also belongs to a suite of 
products, Studio MX 2004, that work together to provide a full spectrum of 
Internet solutions. Studio MX also includes Fireworks MX 2004, Flash MX 
2004, ColdFusion MX, and Freehand MX. 



Dreamweaver has an easy-to-follow-and-learn dialog box so you can style 
Web pages with CSS without even knowing what a style rule is! Many of the 
benefits of Dreamweaver stem from its sleek user interface and its respect for 
clean HTML. You can learn more about Dreamweaver by visiting the 
Macromedia Web site at www .macromedi a . com. 
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If you're too low on funds for a top-of-the-line WYSIWYG HTML editor like 
Dreamweaver MX (suggested retail price is about $500, but discounts of up 

aBiO^tre available), there are other possibilities. You can ponder the sug- 
|\>^in the next section or go a-searching on the Web (the search string 
"WYSIWYG HTML editor" should do nicely) to find lots more still! 



Contenders 

WYSIWYG editors generate allegiances that can seem as pointless as the 
enmity between owners of Ford and Chevy trucks. Both of the following edi- 
tors have fans, and they can both produce great Web pages. 



FrontPage 2003 is Microsoft's latest version of its award-winning Web 
site builder. It's in all MS Office 2003 versions. 





www.nicrosoft.con/frontpage/ 




\S GoLive cs is Adobe's latest version of its Web publishing toolset. It's 
included in Adobe Creative Suite Premium. 




www. adobe. con/product s/gol i ve 







Graphics Tools 




Graphics applications are beasts. They can do marvelous things, but learning 
how to use them can be overwhelming at first. 

If you aren't artistically inclined, consider paying someone else to do your 
graphics work. Graphics applications can be pricey and complicated. But 
you should have some kind of high-function (if not high-end) graphics pro- 
gram to tweak images should you need to. Our highest rating goes to Adobe 
Photoshop, but considering its cost and an average newbie HTML hacker's 
budget, we discuss a lower-cost alternative first in the following section. 



Photoshop Elements: The amateur champ 

At around $150, Adobe Photoshop Elements is an affordable PC- and Mac- 
based starter version of the full-blown Photoshop (the gold standard for 
graphics). You can do almost anything with Photoshop Elements that you 
might need for beginning and intermediate-level graphics editing. The current 
version of the program is Photoshop Elements 3.0. 

This product is for you if you want to add images to your site but you don't 
want to make graphic arts your full-time living (or your full-time obsession). 
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To learn more about Photoshop Elements, visit www .adobe .com, select 
ProductsODigital Imaging, and then select whichever version of Photoshop 
(PC or Mac) you want to read more about from the Digital Imaging 
drop-down menu. 




If you're really on a tight budget, check out the $100, PC-only Paint Shop Pro 
at www . j a sc . com instead. It does nearly everything that Photoshop Elements 
does and costs about one-third less. 



Professional contenders 



If you work with lots of photographs or other high-resolution, high-quality 
images or artwork, you may need one of these tools for Web graphics. 



Adobe Photoshop 

If it weren't so darned expensive, we'd grant top honors to Photoshop. Alas, 
$650 is too rich for many novices' budgets. Wondering whether to upgrade 
from Photoshop Elements? Adobe mentions these capabilities among its "Top 
reasons to upgrade": 

Improved file browser: Shows and tells you more about more kinds of 
graphics files and gives you more-powerful search tools. 

V Shadow/Highlight correction: Powerful built-in tools add or manipulate 
shadows and highlights in images. 

i>* More-powerful color controls: Color palettes and color-matching tools 
with detailed controls that Elements lacks. 

Text on a path: Full-blown Photoshop lets you define any kind of path 
graphically and then instructs text to follow that path. This provides 
fancy layout that Elements can't match. 

If you need to apply sophisticated special effects, edits, or tweaks to high- 
resolution photorealistic images, full-blown Photoshop is your best choice. 
For most basic Web sites, however, Photoshop Elements is more than up to 
the task — which is why it's the most popular graphics editing tool. 

Like its little brother Photoshop Elements, full-blown Photoshop works with 
both Macintosh and PC operating systems. The current version is Adobe 
Photoshop cs. It's included in all of Adobe's product suites. 
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Photoshop cs add-ons and plug-ins provide specialized functions — such 
as complex textures or special graphics effects. This extensibility is nice 
^be^u»«fcgraphics professionals who need such capabilities can buy them 
^yr|o\:^J)st $100 and up, with $300 a pretty typical price) and add them with- 
out any muss or fuss. But those who don't need them don't have to buy 
them and thus don't need to pay extra for the base-level software. 



Macromedia Fireworks 

Fireworks is a graphics program designed specifically for Web use, so it offers 
lots of nice features and functions for that purpose. The current version is 
Macromedia Fireworks MX 2004. 



Fireworks is tightly integrated with other Macromedia products and therefore 
is of potentially great interest if you're using (or considering) Dreamweaver. 
Simply put, this combination of Macromedia products makes it very easy to 
add graphical spice to Web pages. 

For more information about Fireworks and related Macromedia products, 
check out www .macromedi a.com/software/fireworks. 



Link Checkers 

A broken link on your site can be embarrassing. To spare your users the 
dreaded 404 Object Not Found error message, use a link checker to make 
sure your links are 




Correctly formatted before you publish 
Live on the Web after you publish 

Other Web sites may change or disappear after you publish your site. 
Regularly check your site's links to make sure they still work. 

The worst broken link points to a page on your own site. 

Many HTML editors and Web servers include built-in local link checkers, and 
they may even scour the Web to check external links. 



Web Link Vatidator: The champ 

Web Link Validator 3.5 is a professional-strength tool at an affordable price 
($27). We recommend it because it handles many kinds of links and reports 
clearly and concisely on their condition. 
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Contenders 



You can find Web Link Validator all over the Web. A good place to grab it is at 
www. downl oad .com (search the program name to find it immediately). 



Both of the following programs are pretty good link checkers, They need a 
little elbow grease to learn and to use, but the price is right: free. 

W3C Link Checker 

This is a utility created by volunteers for the World Wide Web Consortium. 
You can either 

i>* Download it from http://validator.w3.org/docs/checkl ink. html. 
You have a couple of download options: 

• Grab a compiled version for your computer and operating system 
and run it as-is. 

• Grab the source code and tweak it for your needs and situation. 
Use the online version at http://val idator.w3.org/checkl ink. 

MOMspider 

Roy Fielding's MOMspider is a sentimental favorite. It was one of the first link 
checkers for Web folks. It runs on any machine that can compile Perl (every 
machine we know of), and it has lots of options to do the heavy lifting. 

The ingredients are at http : //ftp . i cs . uci . edu/pub/websof t/MOMspi der. 



HTML Validators 

Validation compares a document to a set of document rules — a Document 
Type Definition (DTD). Simply put, validation checks the actual markup and 
content against the DTD and flags any deviations it finds. 

Typically, a document author follows this process: 

1. Create an HTML document in an HTML editor. 

Let's say this step results in a file called my page. htm. 

2. Submit my pa ge . htm to an HTML or XHTML validation site for inspec- 
tion and validation. 

If any problems or syntax errors are detected, the validator reports such 
errors in an annotated version of the original HTML document. 
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3. If the validator reports errors, the author corrects those errors and 
resubmits the document for validation. 

etimes, breaking HTML rules is the only way for your page to look 
in older Web browsers. But document rules exist for a reason: 
Nonstandard or incorrect HTML markup often produces odd or unpre- 
dictable results. 

Browsers usually forgive markup errors. Most browsers identify HTML pages 
without an <html > element. But someday, markup languages will be so com- 
plex and precise that browsers won't be able to guess whether you're pub- 
lishing in HTML or another extensible markup language. Get the markup right 
from the beginning and save yourself a bunch of trouble later. 

HTML validation is built into many HTML editors. 



W3C Validator 



The W3C has a free, Web-based validation system available at http : / / 
va 1 i dator . w3 .org. 

The W3C validation tool lets you choose 

i>* Which HTML or XHTML DTD version to check against your document 
f" Output formats: 

• A terse output lists only the line numbers in your document, the 
boo-boos, and a brief description of each. 

• A verbose output lists great detail about each error and links to the 
relevant information in the HTML specification. 



Built-in Validators 

Many tools in this chapter offer HTML validation. These include HTML-Kit, 
HomeSite+, and BBEdit. Use 'em if you got 'em; get 'em if you don't! 



FTP Clients 



After you create your Web site on your computer, you have to share it with 
the world. So you need a tool to transfer your Web pages to your Web server. 
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eb servers do the heavy lifting 



ses collections of stuff like 
pages and graphicsfor a Web site. You may have 
your own server. If you don't know if you have 
one, you don't. But don't run out and buy one! 

A Web server runs special software that's ded- 
icated to presenting and maintaining Web files 



(among several other Web-related tasks). If you 
don't have one of these supercomputers, your 
ISP (such as EarthLink or MSN) can host your 
pages for a fee. Many service providers include 
support for Web sites (normally up to 100MB in 
size) as part of their basic account offerings. 



After you select a server host and you know how to access a Web server 
(your service provider should supply you with this information), upload your 
pages to that server by using FTP. That means you need an FTP program. 

All FTP programs are similar and easy to operate. We recommend these: 

If* WS_FTP Professional for Windows is located at www . i pswi tch .com. 
V Fetch for the Mac is located at http : //fetchsof tworks .com. 



SwVss Army Knitfes 

Collections of tools can help you manage and control your Web site. They're 
the Web version of a chunky red knife with a tool for every purpose. We call 
these Swiss army knives. 

V HTML Toolbox, from NetMechanic, is the sharpest tool in the shed. This 
puppy has most of the features we recommend in this chapter, including 
link and spell checking and validation. 

This convenient little package costs you about $60 per year. If that's not 
too much to ask, check it out at 

www.netnechanic.con/naintain.htm 

v 0 HTML-Kit supports plug-ins to add functions such as link checks and 
spelling checks. Most of these plug-ins are free or inexpensive. 

www.chami .con 

f" Easy HTML Construction Kit offers a collection of useful conversion, 
reformatting, and template management tools. It's at 

www.hernetic.ch/htnl .htm 
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In This Chapter 

Concentrating on content 

Going easy on the graphics, bells, whistles, and hungry dinosaurs 
Creating well-formulated HTML and then testing, testing, testing 
Keeping it interesting after the building is ovah! 




y itself, HTML is neither too complex nor overwhelmingly difficult. As 
some high-tech wags (including a few rocket scientists) have put it, 



HTML ain't rocket science! Nevertheless, important do's and don'ts can make 
or break the Web pages you build with HTML. Consider these humble admon- 
ishments as guidelines to make the most of HTML without losing touch with 
your users or watching your page blow up on its launch pad. 

If some points we make throughout this book seem to crop up here, too (espe- 
cially regarding proper and improper use of HTML), it's no accident. Heed ye 
well the prescriptions and avoid ye the maledictions. But hey, they're your 
pages. You can do what you want. Your users will decide the ultimate outcome. 
(We never say, "We told you so." Nope. Not us!) 



Concentrate on Content 

Any Web site lives or dies by its content. That a site is meaningful, that it 
delivers information directly, easily, and efficiently, and the reasonable expec- 
tation of finding something new and interesting on each new visit are all 
pluses. But all of those things (and more) rest on solid, useful content to give 
visitors a reason to come (and later, to return) to your site. 



NeVer lose siqht of your content 

So we return to the crucial question of payload: page content. Why? Well, as 
Darrell Royal (legendary football coach of the University of Texas Longhorns 
in the '60s and 70s) is rumored to have said to his players, "Dance with who 
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brung ya." In normal English (as opposed to Texan), this means that you 
should stick with the people who've supported you all along and give your 
those who've given it to you. 



sure what this means for football, but for Web pages it means keep- 
ing faith with your users and keeping content paramount. If you don't have 
strong, solid, informative content, users quickly get that empty feeling that 
hits when Web pages are content-free. Then they'll be off to richer hunting 
grounds on the Web, looking for content somewhere else. 

To satisfy user hunger, put your most important content on your site's major 
pages. Save the frills and supplementary materials for secondary pages. The 
short statement of this principle for HTML is, "Tags are important, but what's 
between the tags — the content — is what really counts." Chapters 2 and 3 
cover making your content the best it can possibly be. 



Structure your documents and your site 

For users, a clear road map of your content is as important for a single home 
page as it is for an online encyclopedia. When longer or more complex docu- 
ments grow into a full-fledged Web site, a road map becomes more important 
still. This map ideally takes the form of (you guessed it) a flow chart of page 
organization and links. If you like pictures with a purpose, the chart could 
appear in graphic form in an explicitly labeled site map. 

We're strong advocates of top-down page design: Don't start writing content 
or placing tags until you understand what you want to say and how you want 
to organize your material. Then start building your HTML document or col- 
lection of documents with paper and pencil (or whatever modeling tool you 
like best). Sketch out relationships within the content and among your pages. 
Know where you're building before you roll out the heavy equipment. 




Good content flows from good organization. It helps you stay on track during 
page design, testing, delivery, and maintenance. Organization helps users find 
their way through your site. Need we say more? Well, yes: Don't forget that 
organization changes with time. Revisit and critique your organization and 



structure on a regular basis, and don't be afraid to change either one to keep 
up with changes in content or focus. 



Go East} on the Graphics, Bells, Whistles, 
and Hungry Dinosaurs 



Markup, scripting, and style sheets make many things possible. But not 
all possibilities deserve implementation, nor can Web sites live by snazzy 
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graphics, special effects, and blinking marquees alone. Let your design and 
your content drive the markup, the graphics, and interaction, and your site 
job without dazzling visitors so they lose sight of same. 




Make the most from the least 

More is not always better, especially when it comes to Web pages. Try to 
design and build your pages using minimal ornaments and simple layouts. 
Don't overload pages with graphics or add as many levels of headings as you 
can fit. Instead, do everything you can to make sure your content is easy to 
read and follow. To keep distractions and departures to a minimum, also 
make sure any hyperlinks you include add real value to your site. 

Gratuitous links to useless information are nobody's friend; if you're tempted 
to link to a Webcam that shows a dripping faucet, resist, resist, resist! 

Structure and images exist to highlight content. The more bells, whistles, and 
dinosaur growls dominate a page, the more distracted from your content visi- 
tors become. Use structure and graphics sparingly, wisely, and carefully. 
Anything more can be an obstacle to content delivery. Go easy on the anima- 
tions, links, and layout tags, or risk having your message (even your page) 
devoured by a hungry T. Rex. 



Build attractive pages 

When users visit Web pages with a consistent framework that focuses on con- 
tent, they're likely to feel welcome. The important thing is to supplement con- 
tent with graphics and links — don't trample users with an onslaught of 
pictures and links. Making Web pages pretty and easy to navigate only adds 
to a site's basic appeal and makes your cybercampers even happier. 

If you need inspiration, cruise the Web and look for layouts and graphics that 
work for you. If you take the time to analyze what you like, you can work from 
other people's design principles without having to steal details from their lay- 
outs or looks (which isn't a good idea anyway). 

As you design Web documents, start with a basic, standard page layout. Pick 
a small, interesting set of graphical symbols or icons and adopt a consistent 
navigation style. Use graphics sparingly (yes, you've heard this before); make 
them as small as possible — limit size, number of colors, shading, and so on, 
while retaining eye appeal. When you build simple, consistent navigation 
tools, label them clearly and use them everywhere. Your pages can be appeal- 
ing and informative if you invest the time and effort. 
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rt with solid markup and good content and then work through what 
you've wrought to make sure everything works like it's supposed to (and 
communicates what it ought to), you're on your way to a great Web site. But 
once the construction is over, the testing begins. And only when the testing 
returns positive results should you open your virtual doors to the public. 



Keep track of those taqs 

Although you're building documents, it's easy to forget to use closing tags, 
even when they're required (for example, the </a> that closes the opening 
anchor tag <a>). When you're testing Web pages, some browsers can com- 
pensate for your errors, leaving you with a false sense of security. 




The Web is no place to depend on the kindness of strangers. Scrutinize your 
tags to head off possible problems from browsers that might not be quite so 
understanding (or lax, as the case may be). 



As for the claims that some vendors of HTML authoring tools make ("You 
don't even have to know any HTML!"), all we can say is, "Uh-huh, suuurre. " 
HTML itself is a big part of what makes Web pages work; if you understand it, 
you can troubleshoot with minimal fuss. Also, only you can ensure that your 
pages' inner workings are correct and complete for your documents, whether 
you build them yourself or a program builds them for you. 

We could go on ad infinitum about this, but we'll exercise some mercy and 
confine our remarks to the most pertinent items: 

f* Keep track of tags yourself while you write or edit HTML by hand. If 

you open a tag — be it an anchor, a text area, or whatever — create the 
closing tag for it right then and there, even if you have content to add. 
Most HTML editors do this for you. 

Use a syntax checker to validate your work during the testing process. 

Syntax checkers are automatic tools that find missing tags or errors — 
and other ways to drive you crazy! Use these whether you build pages 
by hand or with software. The W3C's (free) HTML Validator lives at 

http://validator.w3. org. 

v 0 Obtain and use as many browsers as you can when testing pages. This 
not only alerts you to missing tags, but it can also reveal potential 
design flaws or browser dependencies (covered in the "Avoid browser 
dependencies" section later in this chapter). This exercise also empha- 
sizes the importance of alternate text information. That's why we also 
check our pages with Lynx (a character-only browser). 
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Always follow HTML document syntax and layout rules. Just because 
most browsers don't require elements such as <html >, <head>, and 



,dy> doesn't mean you can omit them. It means that browsers don't 
a hoot whether you use them or not. But browsers per se are not 
your audience. Your users (and future browsers) may indeed care. 




Although HTML isn't exactly a programming language, it still makes sense to 
treat it like one. Following formats and syntax helps you avoid trouble, and 
careful testing and rechecking of your work ensures a high degree of quality, 
compliance with standards, and a relatively trouble-free Web site. 



Avoid browser dependencies 

When you're building Web pages, the temptation to view the Web in terms of 
your favorite browser is hard to avoid. That's why you should always remem- 
ber that users view the Web in general (and your pages in particular) from 
many perspectives — through many different browsers. 

During the design and writing phases, you'll probably hop between HTML 
and a browser's-eye view of your work. At this point in the process, you 
should switch from one browser to another and test your pages among sev- 
eral browsers (including at least one character-mode browser). This helps 
balance how you visualize your pages and helps keep you focused on 
content. 





You can use public Telnet servers with Lynx (a character-mode browser) 
installed for free and that don't require software installation. Visit www .brain 
stormsandraves.com/articles/browsers/lynxfora good discussion of 
using Lynx when testing Web pages. 

During testing and maintenance, you must browse your pages from many dif- 
ferent points of view. Work from multiple platforms; try both graphical and 
character-mode browsers on each page. Testing takes time but repays your 
investment with pages that are easy for everyone to read and follow. It also 
helps viewers who come at your materials from platforms other than your 
own and helps your pages achieve true independence from any single view- 
point. Why limit your options? 

If several pages on your site use the same basic HTML, create one template 
for those pages. Test the template with as many browsers as you can. When 
you're sure the template is browser-independent, use it to create other pages. 
This helps ensure that every page looks good, regardless of which browser a 
visitor might use, and puts you on your way to real HTML enlightenment. 
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o view the splendor of your site don't want to be told you can 't get 
here. Aids to navigation are vital amenities on a quality Web site. A 
navigation bar is a consistent graphical place to put buttons that help users 
get from A to B. By judicious use of links and careful observation of what con- 
stitutes a complete screen (or screenful) of text, you can help your users min- 
imize (or even avoid) scrolling. Text anchors make it easy to move to the 
previous and or next screens, as well as to the top, index, and bottom in any 
document. Just that easy, just that simple — or so it appears to the user. 

We believe in the low scroll rule: Users should have to scroll no more than one 
screenful in either direction from a point of focus or entry to find a navigation 
aid that lets them jump (not scroll) to the next point of interest. 

We don't believe that navigation bars are mandatory or that names for con- 
trols should always be the same. But we do believe that the more control you 
give users over their reading, the better they like it. The longer a document 
gets, the more important such controls become; they work best if they occur 
about every 30 lines in longer documents (or in a separate, always-visible 
frame if you use HTML frames). 



Keep It Interesting After It's Built! 

The tendency to sit on one's fundament, if not rest on one's laurels, after 
launching a Web site is nearly irresistible. It's okay to sit down, but it isn't 
okay to leave things alone for too long or to let them go stale for lack of atten- 
tion and refreshment. If you stay interested in what's on your site after it's 
ready for prime time, your content probably won't go past its freshness date. 
Do what you can (and what you must) to stay on top of things, and you'll stay 
engaged — as should your site visitors! 



Think evolution, not revolution 

Over time, Web pages change and grow. Keep a fresh eye on your work and 
keep recruiting fresh eyes from the ranks of those who haven't seen your 
work before to avoid what we call "organic acceptance." 

This concept is best explained by the analogy of your face in the mirror: You 
see it every day; you know it intimately, so you aren't as sensitive as some- 
one else to how your face changes over time. Then you see yourself on video, 
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or in a photograph, or through the eyes of an old friend. At that point, 
changes obvious to the world reveal themselves to you as you exclaim, 
,e completely gray!" or "My spare tire could mount on a semi!" 



Changes to Web pages are usually evolutionary, not revolutionary They 
proceed in small steps; big leaps are rare. Nevertheless, you must stay sensi- 
tive to the underlying infrastructure and readability of your content as pages 
evolve. Maybe the lack of on-screen links to each section of your Product 
Catalog didn't matter when you had only three products — but now that you 
offer 25, they're a must. You've heard that form follows function; in Web terms, 
the structure of your site needs to follow changes in its content. If you regu- 
larly evaluate your site's effectiveness at communicating, you know when it's 
time to make changes, large or small. 

This is why user feedback is crucial. If you don't get feedback through forms 
or other means, aggressively solicit some from your users. If you're not sure 
how you're doing, consider: If you don't ask for feedback, how can you tell? 



Beating the two-dimensional text trap 

Because of centuries of printed material and the linear nature of books, our 
mindsets can use an adjustment. The nonlinear potentials of hypermedia give 
the Web a new definition for the term document. But it's tempting to pack 
pages full of hypercapabilities until they resemble a Pony Express dynamite 
shipment and gallop in many directions at once. Be safe: Judge hypermedia 
by whether it 

«* Adds interest 

f* Expands on your content 

Makes a serious — and relevant — impact on the user 

Within these constraints, such material can vastly improve any user's experi- 
ence of your site. 

Stepping intelligently outside old-fashioned linear thinking can improve your 
users' experience of your site and make your information more accessible to 
your audience. That's why we encourage careful use of document indexes, 
cross-references, links to related documents, and other tools to help users 
navigate within your site. Keep thinking about the impact of links as you look 
at other people's Web materials; it's the quickest way to shake free of the 
linear-text trap. (The printing press was high-tech for its day, but that was 500 
years ago!) If you're looking for a model for your site's behavior, don't think 
about your new trifold four-color brochure, however eye-popping it is; think 
about how your customer-service people interact with new customers on the 
telephone. ("What can I do to help you today?") 
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}i deal with your Web materials post-publication, it's only human to 
iter finishing a big job. Maintenance isn't as heroic or inspiring as 
creation, yet it represents most of the activity to keep any document alive 
and well. Sites that aren't maintained often become ghost sites; users stop 
visiting sites when developers stop working on them. Never fear — a little 
work and attention to detail keeps your pages fresh. If you start with some- 
thing valuable and keep adding value, a site's value appreciates over time — 
just like any other artistic masterpiece. Start with something valuable and 
leave it alone, and it soon becomes stale and loses value. 

Consider your site from the viewpoint of a master aircraft mechanic: Correct 
maintenance is a real, vital, and on-going accomplishment, without which you 
risk a crash. A Web site, as a vehicle for important information, deserves reg- 
ular attention; maintaining a Web site requires discipline and respect. See www . 
d i sobey. c om /ghosts ites/index.shtml for a humorous look at ghost sites. 

Keeping up with change translates into creating (and adhering to) a regular 
maintenance schedule. Make it somebody's job to spend time on a site regu- 
larly; check to make sure the job's getting done. If people are tagged to 
handle regular site updates, changes, and improvements, they flog other par- 
ticipants to give them tasks when scheduled site maintenance rolls around. 
Pretty soon, everybody's involved in keeping information fresh — just as 
they should be. This keeps your visitors coming back for more! 
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In This Chapter 

s> Avoiding markup and spelling faux pas 
Keeping links hot and fresh 

Gathering beta testers to check, double-check, and triple-check your site 
Applying user feedback to your site 



J\ fter you put the finishing touches on a set of pages (but before you go 
v \ public on the Web for the world to see), it's time to put them through 
their paces. Testing is the best way to control a site's quality. 

Thorough testing must include content review, analysis of HTML syntax and 
semantics, link checks, and various sanity checks to make doubly sure that 
what you built is what you really wanted. Read this chapter for some gems of 
testing wisdom (learned from a lifetime of Web adventures) as we seek to rid 
your Web pages of bugs, errors, gaucheries, and lurking infelicities. 



Avoid Dead Ends and Spelling Faux Pas 

A sense of urgency that things must work well and look good on a Web site 
will never fail to motivate you to keep your site humming along. That said, if 
you work from a visual diagram of how your site is (or should be) organized, 
you'll be well-equipped to check structure, organization, and navigation. 
Likewise, if you put your pages through their paces regularly (or at least each 
time they change) with a spell checker, you'll be able to avoid unwanted tpyos. 
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Jgn should include a road map (often called a site map) that tells you 
ere in every individual HTML document in your site and the rela- 
tionships among its pages. If you're really smart, you kept this map up-to- 
date as you moved from design to implementation. (In our experience, things 
always change when you go down this path.) If you're merely as smart as the 
rest of us, don't berate yourself — update that map now. Be sure to include 
all intra- and interdocument links. 



A site map provides the foundation for a test plan. Yep, that's right — effective 
testing isn't random. Use your map to 

Investigate and check every page and every link systematically. 

Make sure everything works as you think it should — and that what you 
built has some relationship (however surprising) to your design. 

v* Define the list of things to check as you go through the testing process. 

v* Check everything (at least) twice. (Red suit and reindeer harness 
optional.) 



Master text mechanics 

By the time any collection of Web pages comes together, you're looking at 
thousands of words, if not more. Yet many Web pages get published without 
a spell check, which is why we suggest — no, demand — that you include a 
spell check as a step when testing and checking your materials. (Okay, we 
don't have a gun to your head, but you know it's for your own good.) Many 
HTML tools, such as FrontPage, HomeSite, and Dreamweaver, include built-in 
spell checkers, and that's the first spell-check method you should use. These 
HTML tools also know how to ignore the HTML markup and just check your 
text. 

Even if you use HTML tools only occasionally and hack out the majority of 
your HTML by hand, perform a spell check before posting your documents to 
the Web. (For a handy illustration of why this step matters, try keeping a log 
of spelling and grammar errors you find during your Web travels. Be sure to 
include a note on how those gaffes reflect on the people who created the 
pages involved. Get the message?) 
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ffy^ You can use your favorite word processor to spell check your pages. Before 
. . x ^ gjjggjj them, add HTML markup to your custom dictionary, and pretty 
spell checker runs more smoothly — getting stuck only on URLs 
strange strings that occur from time to time in HTML files. 

If you'd prefer a different approach, try any of the many HTML-based spell- 
checking services now available on the Web. We like the one at the Doctor 
HTML site, which you can find at www2 . i magi ware . com/RxHTML. 

If Doctor HTML's spell checker doesn't float your boat, visit a search engine, 
such as www .yahoo . com or www . googl e . com, and use web page spell check 
as a search string. Doing so can help you produce a list of spell-checking 
tools made specifically for Web pages. 

One way or another, persist until you root out all typos and misspellings. 
Your users may not thank you for your impeccable use of language — but if 
they don't trip over errors while exploring your work, they'll think more 
highly of your pages (and their creator) even if they don't know why. Call it 
stealth diplomacy! 



Keep \lour Perishables Fresh! 

New content and active connections to current, relevant resources are the 
hallmarks of a well-tended Web site. You can't achieve these goals without 
regular (and sometimes, constant) effort, so you plan for ongoing activity. 
The rewards can be great, starting with a genuine sense of user excitement at 
what new marvels and treasures may reveal themselves on their next visit to 
your site. This kind of anticipation is nearly impossible to imitate (without 
doing what you'll have to do to keep things fresh in the first place). 



Lack of live links — a loathsome leqacy 

We performed an unscientific, random-sample test to double-check our own 
suspicions; users told us that positive impressions of a particular site are 
proportional to the number of working links they find there. The moral of this 
survey: Always check your links. This step is as true after you publish your 
pages as it is before they're made public. Nothing irritates users more than a 
link that produces the dreaded 404 File not found error instead of the 
good stuff they seek! Remember, too, that link checks are as indispensable to 
page maintenance as they are to testing. 
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0 <^ HE T ^ H you're long on 21st-century street smarts, hire a robot to do the job for you: 
VfiS. They work really long hours (with no coffee breaks), don't charge much, and 

<ery last link in your site (and beyond, if you let them). The best thing 
Dots is that you can schedule them to do their jobs at regular inter- 
vals: They always show up on time, always do a good job, and never com- 
plain (though we haven't yet found one that brings homemade cookies or 
remembers birthdays). All you have to do is search online for phrases like 
link checker. You'll find lots to choose from! 

We're fond of a robot named MOMspider, created by Roy Fielding of the W3C. 
Visit the MOMspider site at http : / /ftp. i cs . uci . edu/pub/websof t/ 
MOMspi der. This spider takes some work to use, but you can set it to check 
only local links, and it does a bang-up job of catching stale links before users 
do. (Some HTML software, such as HomeSite, includes a built-in link checker 
to check your links both before and after you post your pages.) 

If a URL points to one page that immediately points to another (a pointer), 
you're not entitled to just leave the link alone. Sure, it technically works, but 
for how long? And how annoying! So if your link checking shows a pointer 
that points to a pointer (yikes), do yourself (and your users) a favor by 
updating the URL to point directly to the real location. You save users time, 
reduce Internet traffic, and earn good cyberkarma. 




When old links must linger 

If you must leave a URL active even after it has become passe to give your 
users time to bookmark your new location, instruct browsers to jump 
straight from the old page to the new one by including the following HTML 
command in the old document's <head> section: 

<meta http-equiv="refresh" content="0"; ur]="newurlhere" /> 

This nifty line of code tells a browser that it should refresh the page. The 
delay before switching to the new page is specified by the value of the content 
attribute, and the destination URL is determined by the value of the url 
attribute. If you must build such a page, be sure to include a plain-vanilla link 
in its <body> section, too, so users with older browsers can follow the link 
manually, instead of automatically. You might also want to add text that tells 
visitors to update their bookmarks with the new URL. Getting there may not 
be half the fun, but it's the whole objective. 



Make your content mirror your World 

When it comes to content, the best way to keep things fresh is to keep up 
with the world in which your site resides. As things change, disappear, or pop 
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up in that external world, similar events should occur on your Web site. Since 
something new is always happening, and old ways or beliefs fading away — 
^udies of ancient cultures or beliefs — if you report on what's new 
on what's fading from view, you'll provide constant reasons for 
your visitors to keep coming back for more. What's more, if you can accu- 
rately and honestly reflect (and reflect upon) what's happening in your world 
of interest, you'll grab loyalty and respect as well as continued patronage. 



Check \lour Site, and Then 
Check It Aqainl 

There's an ongoing need for quality control in any kind of public content, but 
that need is particularly acute on the Web, where the whole world can stop 
by (and where success often follows the numbers of those who drop in, and 
return). You must check your work while you're building the site and con- 
tinue to check your work over time. This allows you to revisit your material 
with new and shifting perspectives and evaluate what's new and what's 
changed in the world around you. That's why testing and checking are never 
really over; they just come and go — preferably, on a regular schedule! 



Look for trouble in aii the right places 

You and a limited group of users should thoroughly test your site before you 
share it with the rest of the world — and more than once. This process is 
called beta testing, and it's a bona fide, five-star must for a well-built Web site, 
especially if it's for business use. When the time comes to beta-test your site, 
bring in as rowdy and refractory a crowd as you can find. If you have picky 
customers (or colleagues who are pushy, opinionated, or argumentative), be 
comforted knowing that you have found a higher calling for them: Such 
people make ideal beta-testers — if you can get them to cooperate. 

Don't wait till the very last minute to test your Web site. Sometimes the 
glitches found during the beta-test phase can take weeks to fix. Take heed: 
Test early and test often, and you'll thank us in the long run! 

Beta-testers use your pages in ways you never imagined possible. They inter- 
pret your content to mean things you never intended in a million years. They 
drive you crazy and crawl all over your cherished beliefs and principles. And 
they do all this before your users do! Trust us, it's a blessing — even if it's in 
disguise. 
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These colleagues also find gotchas, big and small, that you never knew 
existed. They catch typos that word processors couldn't. They tell you things 
ut and things that you should have omitted. They give you a fresh 
ve on your Web pages, and they help you see them from extreme 
points of view. 




The results of all this suffering, believe it or not, are positive. Your pages 
emerge clearer, more direct, and more correct than they would have if you 
tried to test them yourself. (If you don't believe us, of course, you could try 
skipping this step. And when real users start banging on your site, forgive us 
if we don't watch.) 



Cotter att the bases utith peer reitieuts 

If you're a user with a simple home page or a collection of facts and figures 
about your private obsession, this tip may not apply to you. Feel free to read 
it anyway — it just might come in handy down the road. 

If your pages express views and content that represent an organization, 
chances are, oh, about 100 percent, that you should subject your pages to 
peer-and-management review before publishing them to the world. In fact, we 
recommend that you build reviews into each step along the way as you build 
your site — starting by getting knowledgeable feedback on such basic aspects 
as the overall design, writing copy for each page, and the final assembly of 
your pages into a functioning site. These reviews help you avoid potential 
stumbling blocks, such as unintentional off-color humor or unintended politi- 
cal statements. If you have any doubts about copyright matters, references, 
logo usage, or other important details, get the legal department involved. (If 
you don't have one, you may want to consider a little consulting help for this 
purpose.) 

<s^ HE T fy# Building a sign-off process into reviews so you can prove that responsible 
*/v& if parties reviewed and approved your materials is a good idea. We hope you 
i ffi don't have to be that formal about publishing your Web pages, but it's far, far 
better to be safe than sorry. (This process is best called covering the bases, or 
~~ perhaps it's really covering something else? You decide.) 



Use the best toots of the testing trade 

When you grind through your completed Web pages, checking your links and 
your HTML, remember that automated help is available. If you visit the W3C 
HTML Validator at http : // va 1 i dator . w3 .org, you'll be well on your way to 
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finding computerized assistance to make your HTML pure as air, clean as the 
driven snow, and standards-compliant as, ah, really well-written HTML. (Do we 
k w to mix a metaphor, or what?) 



Likewise, investigating the link checkers discussed earlier in the chapter is a 
good idea; use them regularly to check links on your pages. These faithful 
servants tell you if something isn't current, so you know where to start look- 
ing for links that need fixing. 



Schedule site rerieuJs 

Every time you change or update your Web site, you should test its function- 
ality, run a spell check, perform a beta test, and otherwise jump through 
important hoops to put your best foot forward online. But sometimes you'll 
make just a small change — a new phone number or address, a single prod- 
uct listing, a change of name or title to reflect a promotion — and you won't 
go through the whole formal testing process for "just one little thing." 

That's perfectly understandable, but one thing inevitably leads to another, 
and so on. Plus, if you solicit feedback, chances are good that you'll get some- 
thing back that points out a problem you'd never noticed or considered 
before. It's essential to schedule periodic Web site reviews, even if you've 
made no big changes or updates since the last review. Information grows 
stale, things change, and tiny errors have a way of creeping in as one small 
change succeeds another. 

Just as you take your car in for an oil change or swap out your air-conditioning 
filter, you should plan to check your Web site regularly. Most big organiza- 
tions we talk to do this every three months or so; others do it more often. 
Even when you think you have no bugs to catch, errors to fix, or outdated 
information to refresh, you'll often be surprised by what a review turns up. 
Make this part of your routine, and your surprises will be less painful — and 
require less work to remedy! 



Let User Feedback Feed \lour Site 

Who better to tell you what works and what doesn't than those who use (and 
hopefully, even depend on) your site? Who better to say what's not needed 
and what's missing? But if you want user feedback to feed your site's growth 
and evolution, you not only have to ask for it, you have to find ways to 
encourage it to flow freely and honestly in your direction, then act on it to 
keep the wellsprings working intact. 
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r you publish your site, testing never ends. (Are you having flash- 
high school or college yet? We sure are.) You may not think of user 
feedback as a form (or consequence) of testing, but it represents the best 
reality check your Web pages are ever likely to get, which is why doing every- 
thing you can — including offering prizes or other tangibles — to get users to 
fill out HTML forms on your Web site is a good idea. 



This reality check is also why reading all feedback you get is a must. Go out 
and solicit as much feedback as you can handle. (Don't worry; you'll soon 
have more.) But the best idea of all is to carefully consider the feedback that 
you read and then implement the ideas that actually bid fair to improve your 
Web offerings. Oh, and it's a really good idea to respond to feedback with per- 
sonal e-mail, to make sure your users know you're reading what they're 
saying. If you don't have time to do that, make some! 




Even the most finicky and picky of users can be an incredible asset: Who better 
to pick over your newest pages and to point out those small, subtle errors or 
flaws that they revel in finding? Your pages will have contributed mightily to 
the advance of society by actually finding a legitimate use for the universal 



delight in nitpicking. And your users can develop a real stake in boosting your 
site's success, too. Working with your users can mean that some become more 
involved, helping guide the content of your Web pages (if not the rest of your 
professional or obsessional life). Who could ask for more? Put it this way: You 
may yet find out, and it could be remarkably helpful. 



If you give to them, they'll give to you! 

Sometimes, simply asking for feedback or providing surveys for users to fill 
out doesn't produce the results you want — either in quality or in volume. 
Remember the old days when you'd occasionally get a dollar bill in the mail 
to encourage you to fill out a form? It's hard to deliver cold, hard cash via the 
Internet, but a little creativity on your part should make it easy for you to 
offer your users something of value in exchange for their time and input. It 
could be an extra month on a subscription, discounts on products or services, 
or some kind of freebie by mail. (Maybe now you can finally unload those 
stuffed Gila monsters you bought for that trade show last year. . . .) 

But there's another way you can give back to your users that might not even 
cost you too much. An offer to send participants the results of your survey, 
or to otherwise share what you learn, may be all the incentive participants 
need to take the time to tell you what they think, or to answer your ques- 
tions. Just remember that you're asking your users to give of their time and 
energy, so it's only polite to offer something in return. 
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In this part . . . 

This part of the book supplements the main text with 
pointers to useful resources and summary informa- 
tion. It includes addresses to Web pages that provide com- 
plete lists of HTML and XHTML elements, with syntax 
information and brief descriptions and explanations, and 
does the same for Cascading Style Sheet (CSS) markup as 
well. It also holds a glossary of technical terms found else- 
where in the book. 

We hope you get to know these supporting members of 
our cast, and use them often and well! 
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t 

■ n markup terminology, elements or attributes may be deprecated. This 
M means they're still recognized but doomed to obsolescence. If you see 
(X)HTML markup you don't recognize or can't find elsewhere in this book, 
chances are good that it's deprecated. (XHTML doesn't recognize deprecated 
items if you use the Strict DTD, but XHTML Transitional and Frameset DTDs 
do recognize them.) 

Table A-l lists deprecated (X)HTML elements; Table A-2 lists deprecated 
(X)HTML attributes (in alphabetical order, for easy reference). 



Table A-1 


Deprecated (X)HTML Elements 




Element Common Name 


Empty? 


Category Description 



applet Applet No Inclusion Includes Java 

applet in 
(X)HTML 
document 



basefont Base font Yes Presentation Sets default 

font for text to 
which no style 
sheetor font 
element 
applies 

center Center text No Presentation Centers 

enclosed text 
in current dis- 
play area 

dir Directory list No List Lists style for 

lists of short 
strings (like file 
names) 
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Table A-1 (continued) 

t Common Name Empty? Category Description 

Font info Yes Presentation Sets size, font, 

and color 
for element 
content 



isindex Single-line input Yes Form-related Prompts user 

for single line 
of input 



menu 


Menu list 


No 


List 


Creates com- 
pact list format 


param 


Object 
parameters 


Yes 


Inclusion 


Passes "com- 
mand line" 
input to Java 
applet 


s 


Strikethrough 


No 


Presentation 


Uses strike- 
through font 
for element 
content 


stri ke 


Strikethrough 


No 


Presentation 


Uses 

strikethrough 
font for ele- 
ment content 


u 


Underline 


No 


Presentation 


Uses underline 
font for ele- 



ment content 



Table A-2 


Deprecated (X)HTML Attributes 


Name 


Where Deprecated 


Description 


align 


<captionXimgXtable> 
<hr><div><hl. .6><p> 


Sets alignment at top, 
bottom, 1 eft, right 


a 1 i n k 


<body> 


Sets color for active docu- 
ment links 


background 


<body> 


Sets background picture for 
document body (URL is target) 
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Name 


Where Deprecated 


Description 


Dks° 


<body><tabl e> 
<tr><td><th> 


Sets background colorfor 
document body 


border 


<imgXobject> 


Sets width of border around 
image 


cl ea r 


<br> 


Sets side of line break on 
which floating objects may 



not be positioned 



color <basef ontXf ont> Sets colorfor basefont 

(default) or font element 
content 



compact 


<ol><ul> 


Special compact formatting 
for list elements 


hspace 


<img><object> Sets horizontal margin around 

an image or object 


link 


<body> 


Sets default color for docu- 
ment links 


noshade 


<hr> 


Instructs browser to draw 








horizontal rules without 3-D 
shading 


nowrap 


<td><th> 




Instructs browser not to per- 
form word wrap 


si ze 


<basefont><font><hr> Sets size for<basefont>or 

<font> from 1 to 7, <hr> in 
pixels 


start 


<ol> 


Sets starting number for 
ordered list 


text 


<body> 


Sets text (foreground) color 
for document body 


type 


<li> 


Sets list style (1 1 a | A | i | I 
for ordered lists, disc 
ci rcl e squa re for 
unordered lists) 



value <li> Sets the value for a list item, 

specified by number 
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Table A-2 (continued) 


1.. 


Where Deprecated 


Description 


vl i nK 


<body> 


Sets color for document links 
already visited 


vspace 


<img><object> 


Sets vertical margin for an 
image 


wi dth 


<hr><pre><tdXth> 


Sets width (percentage or 
pixels) for object sizing or 
spacing 
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This appendix provides complete coverage of two special categories of 
CSS properties that we describe in Chapters 8 and 9: 

v 0 Shorthand properties are catchall CSS properties that permit a single 
selector statement in a style sheet to cover all properties that relate to 
each other, such as backgrounds, padding, borders, audio cueing, and so 
forth. See Table B-l. 

t<" Aural properties relate to how styles help control how text is rendered 
in speech form (usually for visually-impaired Web surfers). See Table B-2. 



Table B-1 


c 


SS Shorthand Properties 




Name 


Values 




Description 




background 


{ background 




attachment Sets all backgrounc 


settings 



background-col or | 
background-image j 
background-position | 
background-repeat | 
i nheri t ) 



border 


{ col or border-styl e 


Sets all border properties 




border-width inner it) 


around an element 


border- 


(border-bottom -width 


Sets all border bottom proper- 


bottom 


border-sty 1 e col or 


ties for an element 




i nheri t ) 




border-1 eft 


{ border-1 eft-wi dth 


Sets all border left properties 




border-sty 1 e col or 


for an element 




inherit) 
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Table B-1 (continued) 




Values 


Description 




boraer- 

pi n h t 
i i y 1 1 u 


{border-right-width 

UUiUCi o L) 1 C LU 1 Ul 

i nheri t ) 


Sets all border right proper- 
ties for an element 


h n p rl p> y — 

styl e 


I rl^chdrl 1 HnttoH 1 rlniihl p> 1 

groove hi dden inset 


Sets all border styles for an 
element 




none outset ri dge 
solid i nheri t ) 






border-top 


{ border-top-wi dth 
border-styl e col or 
inherit) 


Sets all border top properties 
for an element 


border- 
wi dth 


{ 1 ength medi um thi ck 
thin i nheri t ) 


Sets all border width proper- 
ties around an element 


cue 


{cue-before cue-after 
inherit) 


Sets all controls for auditory 
cues on text-to-speech 
rendering 


font 


{Caption Font-family 
Font-si ze Font-sty 1 e 
Font- va ri ant Font- 
wei ght Icon Li ne- 
hei ght Menu Message- 

hnv 1 'sma 1 1 - r^nt i nn 1 
U U A 0 III a I I LdjJLIUII 

Status-bar Inherit) 


Governs all types of text dis 








1 1 5 L 5 Lj 1 C 


I ~\ i C"T" — c "t" \/ 1 p* — imanp 
1 1 loL oLjIc 1 III a y c 

1 i st-styl e-posi ti on 
1 i st-styl e-type 
i nheri t ) 


Governs display of all list style 
properties for an element 


outl i ne 


{ outl i ne-col or 


Rnuprn<; all nntlinp nrnnprtips 




outline-styleoutline- 
wi dth i nheri t ) 


for an element 




paddi ng 


{padding-widthinherit) 


Sets padding width around all 
four sides of an element 


pause 


{pause-before pause- 
after inherit) 


Controls duration of silent 
pauses before and after ele- 
ment rendering 
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CSS Aural Properties 



Values 



Description 



{ 1 eft-si de | f ar-1 ef 1 1 
1 eft | center-1 eft | 
center|center-right| 
right|far-right|right- 
si de | be hi nd 1 1 eftwa rds | 
rightwards | inherit) 



Describes horizontal position 
of a sound source 



cue-after 



' none I URI I inherit) 



Defines auditory cue to play 
after rendering an element 



cue-before {none | URI | inherit) 



Defines auditory cue to play 
before rendering an element 



el evati on 


{above angle 
hi gher 1 ower 


bel ow 
i nheri t ) 


Describes vertical position of 
a sound source in the listen- 
ing environment 


pause- 
after 


{time percentage 
i nheri t ) 


Controls duration of silent 
pause after element rendering 
(percentage based on 

speech-rate) 


pause- 
before 


{time percentage 
inherit) 


Controls duration of silent 
pause before element 
rendering 


pi tch 


{ frequency hi gh 1 ow 
medi urn x-hi gh x-1 ow 
i nheri t ) 


Sets average pitch of speak- 
ing voice used to render text 


pitch-range 


{ number i nheri t ) 


Sets amount of pitch variation 
in speaking voice used to 
render text 



pi ay-duri ng 



{auto|mix|none|repeat| 
URI I inherit) 



Controls background sound to 
be played while rendering text 
to speech 



richness { number | i nheri t ) 



Defines degree to which 
speaking voice will carry 
(higher numbers carry further) 



speak { none | normal | spel 1 - Defines method whereby con- 

out | i nheri t ) tent should be rendered 

aurally, if at all 
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speaR 



Values 



Description 



spea l 
header 



{always|once| inherit) 



Specifies audible repetition of 
table headers, if any 



speak- { conti nuous | di gi ts | 

numeral inherit) 



Specifies whether numbers 
are read as a whole or in con- 
secutive digits 



speak- 
punctuati on 



{ code | none | i nheri t ) 



Sets method by which punc- 
tuation should be spoken, lit- 
erally or in the length of the 



speech-rate {fastfastermedium 
number si ow si ower 
x-fastx-slow inherit) 


Specifies rate at which 
speaking voice renders text; 
number sets average words 
spoken per minute 


stress {number inherit) 


Sets amount of inflection used 
to render stress markers in 
text 


voice- {specific voice 
family generic voice 
inherit) 


Defines specific voices; can 
define a generic voice for ren- 
dering text to speech 


volume {loud medium number 

percentage | si 1 ent | soft 
x-loudx-soft inherit) 


Sets volume of sound 
; playback 
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absolute: When used to modify pathnames or URLs, a full and complete file 
specification (as opposed to a relative one). An absolute specification 
includes a host identifier, a complete volume, and path specification. 

anchor: In HTML, an anchor is tagged text or a graphic element that acts as 
a link to another location inside or outside a given document, or an anchor 
may be a location in a document that acts as the destination for an incoming 
link. The latter definition is most commonly how we use it in this book. 

array: A collection of data values in a programming language variable; 
JavaScript is among the many such languages that support array typed data 
values. 

attribute: A named characteristic associated with a specific HTML element. 
Some attributes are required, others are optional. Some attributes also take 
values; if so, the syntax is attri bute = " val ue"). 

bandwidth: Technically, the range of electrical frequencies a device can 
handle; more often, bandwidth is used as a measure of a communication 
technology's carrying capacity. 

beta-testing: When you and a limited group of users test your site before you 
share it with the rest of the world. 

block element: Any of a number of text block markup elements in (X)HTML, 
like those used to designate paragraphs, headings, block quotes, lists, tables, 
and forms. Block elements help to organize (or define) text structure in 
chunks. See also inline element. 

body: That part of an (X)HTML document that contains the actual document 
content, especially all text that appears when the document is displayed. 
Occurs between the <body> and </body> tags; that is, as content within the 
body element. Also called document body. 
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bookmark: A reference from a saved list of URLs kept by the Netscape Web 
browser. Bookmarks allow quick loading of a Web site without retyping the 
kmarks work the same as Microsoft Internet Explorer Favorites. 



browser: A Web access program that can request HTML documents from 
Web servers and render such documents on a user's display device. See also 
client. 



bugs: Major or minor errors, mistakes, and gotchas in software. 

client: The end-user side of the client/server arrangement; typically, "client" 
refers to a consumer (rather than a provider) of network services; a Web 
browser is therefore a client program that talks to Web servers. 

Common Gateway Interface (CGI): The specification that governs how Web 
browsers communicate with and request services from Web servers; also the 
format and syntax for passing information from browsers to servers with either 
HTML forms or document-based queries. The current version of CGI is 1.1. 

content: For HTML, content is its raison d'etre; although form is important, 
content is why users access Web documents and why they come back for 
more. 



cookie: A collection of data created and stored on a per-user basis to track 
behavior, preferences, and other persistent kinds of information, across page 
views or site visits. 



CSS (Cascading Style Sheets): A method of coding that allows users to define 
how certain HTML, XHTML, or XML structural elements, such as paragraphs 
and headings, should be displayed using style rules instead of additional 
markup. The versions of CSS are CSS1 and CSS2, with CSS2 being the most 
recent version. 



default: In general computer-speak, a selection made automatically in a pro- 
gram if the user specifies no explicit selection. For HTML, the default is the 
value assigned to an attribute if none is supplied. 

deprecated: The term we use to earmark an HTML element or attribute that 
is to be left for dead by future versions of HTML. 

DHTML (dynamic HTML): The combination of HTML, CSS, the the DOM, and 
JavaScript, used to create interactive Web pages. 

DOCTYPE declaration: Tells the processor where to locate the DTD and con- 
tains declarations for the particular document. Also called a document type 
declaration, abbreviated as DTD. 

document: The basic unit of HTML information, a document refers to the 
entire contents of any single HTML file. Because this definition doesn't 
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always correspond to normal notions of a document, we refer to what can 
formally be called HTML documents more or less interchangeably with Web 
ich is how browsers render such documents for display. 



DOM (Document Object Model): A Web standard, defined by the W3C, that 
allows JavaScript to programmatically access and manipulate the contents of 
a document. The DOM defines each object on a Web page and the attributes 
associated with those objects, and defines the methods that you can use to 
manipulate those objects. 

domain name: A unique name that's registered as part of the Internet's vast 
distributed Domain Name System (DNS), defined somewhere on a nameserver, 
and can therefore be translated into a corresponding numeric IP address, 
located, and accessed on demand (essential for any working Web site). 



dot syntax: Javascript's notation for separating objects, properties, and 
methods using periods, as in automobi 1 e . headl i ght . 1 eft and document . 
image . name. 



DTD (Document Type Definition): A formal SGML specification for a docu- 
ment, a DTD lays out the structural elements and markup definitions to be 
used to create instances of documents. 



element: A section of a document defined by a start- and end-tag or an 
empty tag. 

empty tag: An HTML element that doesn't require the use of a closing tag. 
In fact, the use of a closing tag in empty tags is forbidden. 

entity: A character string that represents another string of characters. 

error message: Information delivered by a program to a user, usually to 
inform him or her that the process hasn't worked properly, if at all. 

event: A user activity, such as moving a mouse pointer over an image or 
clicking a link, that a user performs while visiting a Web page. 

expression: A specific type of programming construct, such as a JavaScript 
"phrase" that can be interpreted to return some kind of value (such as 
numeric, true/false, and so forth). 

external style sheet: A style sheet that resides outside of the Web document 
in a separate, external file. 

footer: The concluding part of an HTML document, the footer should contain 
contact, version, date, and attribution information to help identify a docu- 
ment and its authors. Most people use the <address> element to identify this 
information. 
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form handler: A program on the Web server or even possibly a simple 
ma i 1 to URL that manages the data a user sends to you through the form. 



HTML, forms provide a mechanism to let users interact with 
servers on the Web. Forms are built on special markup that lets browsers 
solicit data from users and then deliver that data to specially designated 
input-handling programs on a Web server. 

function: A set of JavaScript statements that performs a task; especially 
useful when a code fragment or segment is used more than once in a script. 

gateway: A Web site that acts as a portal to an entire virtual community, 
thereby serving as an entry point and a resource map. (This is different from 
an application gateway, which translates between mutually incompatible sets 
of communications protocols or data representations.) 

graphics: In HTML documents, graphics are files that belong to one of a 
restricted family of types (usually .GIF or JPG) that are referenced through 
URLs for inline display on Web pages. 

GUI (Graphical User Interface): Pronounced "gooey," GUIs make graphical 
Web browsers possible; they create a visually oriented interface that makes it 
easy for users to interact with computerized information of all kinds. 

head: This provides basic information about a document, including its title 
and metadata, such as keywords, author information, a description, and so 
forth. If an external stylesheet is referenced in the document body, it's also 
linked in the document head. In (X)HTML documents this part occurs 
between an opening < h e a d > and a closing < / h e a d > tag; that is, as content for 
the head element. Also called document head, document header, or header, 

heading: For HTML, a heading is a markup element used to add document 
structure. Sometimes the term refers to the initial portion of an HTML docu- 
ment between the < head) . . . </head> tags, where titles and context 
definitions are commonly supplied. 

helper applications: Today, browsers can display multiple graphics files (and 
sometimes other kinds of data); sometimes, browsers must pass particular 
files — for instance, motion picture or sound files — over to other applica- 
tions that know how to render the data they contain. Such programs are 
called helper applications because they help the browser deliver Web infor- 
mation to users. 



hexadecimal: A numbering system composed of six letters and ten numbers 
that is used to condense binary numbers. In HTML, hexadecimal numbering 
is used with elements and their attributes to identify colors for backgrounds 
and other elements in a Web page; in this context, such numbers are often 
called "hex codes." 
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HTML (Hypertext Markup Language): The SGML-derived markup language 
used to create Web pages. Not quite a programming language, HTML provides 
icon and syntax for designing and creating useful hypertext docu- 
the Web. 



HTTP (Hypertext Transfer Protocol): The Internet protocol used to manage 
communication between Web clients (browsers) and servers. 

hyperlink: A shorthand term for hypertext link. (See also hypertext link.) 

hypermedia: Any of a variety of computer media — including text, graphics, 
video, sound, and so on — available through hypertext links on the Web. 

hypertext: A method of organizing text, graphics, and other kinds of data for 
computer use that lets individual data elements point to one another; a non- 
linear method of organizing information, especially text. 

image map: A synonym for clickable image, which refers to an overlaid col- 
lection of pixel coordinates for a graphic that can be used to locate a user's 
selection of a region on a graphic, in turn used to select a related hypertext 
link for further Web navigation. 

image rollover: A change in image (usually button) behavior that occurs 
when the user's cursor is positioned over that image (or button). 

inheritance: The style characteristic whereby all elements that nest inside 
any particular element acquire style information from the element within 
which they nest. For example, changing the body element changes all other 
text elements that appear within it, thereby changing the whole Web page. 

inline content: A word or string of words inside of a block element. 

inline element: Any element that controls presentation on an element-by-ele- 
ment basis. An inline element doesn't denote structure. It's a text element 
(such as the <b> element). 

internal style sheet: A style sheet that resides inside of the Web document in 
which you're working. 

IP (Internet Protocol): IP is the specific networking protocol of the same 
name used to tie computers together over the Internet. 

ISP (Internet Service Provider): An organization that provides individuals or 
other organizations with access to the Internet, usually for a fee. ISPs usually 
offer a variety of communications options for their customers, ranging from 
analog telephone lines, to a variety of higher-bandwidth leased lines, to ISDN 
and other digital communications services. 
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Java: An object-oriented, platform-independent, secure, and compact pro- 
gramming language designed for Web application deployment. Most system 
.support Java, which was created by Sun Microsystems. 



layout: The overall arrangement of the elements in a document. 

link: For HTML, a link is a pointer in one part of a document that can trans- 
port users to another part of the same document, or to another document 
entirely. This capability puts the "hyper" into hypertext. In other words, a link 
is a one-to-one relationship/association between two concepts or ideas. 

markup: A way of Embedding special characters (metacharacters) within a 
text file that instructs a computer program how to handle the file's contents. 

markup language: A formal set of special characters and related capabilities 
used to define a specific method for handling the display of files that include 
markup; HTML is a markup language, which is a subset of SGML, used to 
design and create Web pages. 

media types: CSS instructions that govern how pages should be rendered on 
a computer display, how they should print, and how they should sound read 
out loud. For that reason, such styles are divided into visual media (for on- 
screen display), paged media (for print display), and aural (for rendering text 
to speech) types or categories. 

metadata: Specially defined elements that describe a document's structure, 
content, or rendering, within the document itself or through external refer- 
ences. (Metadata literally means data about data.) 

method: In the context of programming and scripting languages, methods 
describe the things that objects can do (or conversely, the kinds of opera- 
tions to which objects may be subjected). In JavaScript, method names may 
be easily recognized because they're followed by parentheses (for example, 
click(),open(),andselected() are all well-recognized method identifiers) . 

multimedia: A method of combining text, sound, graphics, and full-motion or 
animated video within a single compound computer document. 

nameservers: Computers on the Internet that translate domain names into 
the actual Internet location for the resources to which such names refer 
(such as computers, servers, or other devices and interfaces). 

navigation: In the context of the Web, navigation refers to the use of hyper- 
links to move within or between HTML documents and other Web-accessible 
resources. 
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navigation bar: A way of arranging a series of hypertext links on a single line 
of a Web page to provide a set of navigation controls for an HTML document 
f HTML documents. 



nesting: In computer terms, one structure that occurs within another is said 
to be nested; in HTML, nesting happens most commonly with list structures 
that may be freely nested within one another, regardless of type. 

object: In the context of programming and scripting languages, objects refer 
to named entities that have associated properties (characteristics) and meth- 
ods (actions that may be performed upon specific objects). 

operator: Symbols in JavaScript used to work with variables. These include 
common arithmetic operations (+, -, /, and so forth) and various kinds of logi- 
cal (!= or "not equals", I I "either x or y is true", and so forth) and comparison 
(> or "greater than", < or "less than", and so forth) operators. 

pages: The generic term for the HTML documents that Web users view on 
their browsers. 



Perl: A powerful, compact programming language that draws from languages 
such as C, Pascal, sed, awk, and BASIC; Perl is the language of choice for CGI 
programs, partly because of its portability and the many platforms it cur- 
rently supports, and partly because of its ability to exploit operating system 
services quickly and easily. 

plug-in: Hardware or software added to a system that adds a specific feature 
such as plug-ins that allow Netscape Navigator to play video. 

properties: In CSS, they are the different aspects of the display of text and 
graphics, such as font size or background color. In working with scripting lan- 
guages (and object-oriented programming languages in general), properties 
describe characteristics associated with named and defined objects. 

pseudo classes: Any of four link states that can be modified using CSS: link 
(normal state, no activity), visited (user has already been to this link), hover 
(cursor is positioned on the link), and active (user is clicking the link). CSS 
permits link colors or characteristics to reflect pseudo classes. 

relative: When applied to URLs, a relative address provides an abbreviated 
document address that may be combined with the <base> element to create 
a complete address or is the complete address for a local file found in the 
same directory. 

resource: Any HTML document, capability, or other item or service available 
through the Web. URLs point to resources. 
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robot: A special Web-traveling program that wanders widely, following and 
recording URLs and related titles for future reference in search engines. 



he glowing part on the front of your computer monitor where you 
see the Web do its thing (and anything else your computer may like to show 
you). 

script: A set of programming instructions that activate when an event that 
you define occurs. 

scripting language: A special kind of programming language that a computer 
reads and executes at the same time (which means that the computer figures 
out what to do with the language when it appears in a document or at the 
time that it's used. JavaScript is a common scripting language associated 
with Web use). 

search engine: A special Web program that searches the contents of a data- 
base of available Web pages and other resources to provide information that 
relates to specific topics or keywords, which a user supplies. Also called a 
crawler. 



selector: In CSS, identifies the element to which the style rule applies. 

server: A computer on a network whose job is to listen for particular service 
requests and to respond to those that it knows how to satisfy. 

SGML (Standard Generalized Markup Language): An ISO standard docu- 
ment definition, specification, and creation mechanism that makes platform 
and display differences across multiple computers irrelevant to the delivery 
and rendering of documents. 

site map: A visual guide to a Web site's structure and components that you 
may build, maintain, and use only for yourself, or that you may implement in 
(X)HTML as a user aid and navigational tool. 

specification: A formal document that describes the capabilities, functions, 
and interfaces for a specific piece of software, a markup language, or a com- 
munications protocol. 

statement: A complete command, or other syntactically correct line of code, 
in JavaScript or some other programming language. JavaScript has such 
statement types as expression, conditional, and loop statements. 

style sheet: A file that holds the layout settings for a certain category of a 
document. Style sheets, like templates, contain settings for headers and foot- 
ers, tabs, margins, fonts, columns, and more. 
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syntax: Literally, the formal rules for how to speak. But In this book, we use 
syntax to describe the rules that govern how HTML markup looks and 

,within HTML documents. The real syntax definition for HTML comes 
(SGML Document Type Definition (DTD). 

syntax checker: A program that checks a particular HTML document's 
markup against the rules that govern its use; a recommended part of the test- 
ing regimen for all HTML documents. 

tag: The formal name for a piece of HTML markup that signals a command of 
sorts, usually enclosed in angle brackets (< >). 

template: Literally, a model to imitate, we use the term template in this book 
to describe the skeleton of a Web page, including the HTML for its heading 
and footer, and a consistent layout and set of navigation elements. 

text document: A data file that includes only text characters from well- 
defined and usually restrictive character data sets (such as 7- or 8-bit ASCII, 
or ISO-Latin-1). 

thumbnail: A miniature rendering of a graphical image, used as a link to the 
full-size version. 

title: The text supplied to a Web page's title bar when displayed, used as data 
in many Web search engines. 

transparency: A technique for editing images for use on a Web page that per- 
mits the image to blend in with the surrounding page background. Whichever 
color or colors are designated as transparent allow the page to show through. 

URL (Uniform Resource Locator): The primary naming scheme used to iden- 
tify Web resources, URLs define the protocols to use, the domain name of the 
Web server where a resource resides, the port address to use for communica- 
tion, and a directory path to access named Web files or resources. 

user interface: The overall design of your site. Sometimes Abbreviated as UI. 

valid: Code that follows all the syntax rules defined in a document type defin- 
ition, allowing the document to pass through a validator program with no 
errors. 

validation: The process of comparing a document to a set of document rules, 
in this context a DTD. 

variable: A named value in a programming language such as JavaScript that 
programs manipulate using operators, and/or within expressions. 
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W3C (abbreviation for World Wide Web Consortium): The international 
standards body that's charged with custody over the specifications for 




it Web markup languages, including CSS, HTML, XML, and XHTML, 
any others. 



Web: Also called the World Wide Web, WWW, or W3. The complete collection 
of all Web servers available on the Internet, which comes as close to contain- 
ing the "sum of human knowledge" as anything we've ever seen. 

Web pages: Synonym for HTML documents, we use Web pages in this book to 
refer to sets of related, interlinked HTML documents, usually produced by a 
single author or organization. 

Web server: A computer, usually on the Internet, that plays host to httpd 
and related Web-service software. 

Web site: An addressed location, usually on the Internet, that provides access 
to the set of Web pages that correspond to the URL for a given site; thus a 
Web site consists of a Web server and a named collection of Web documents, 
both accessible through a single URL. 

well-formed document: An HTML document that adheres to the rules that 
make it easy for a computer to interpret. 

white space: The "breathing room" on a page, white space refers to parts 
of a display or document unoccupied by text or other visual elements. A 
certain amount of white space is essential to make documents attractive 
and readable. 

WYSIWYG (What You See Is What You Get): Text editors or other layout 
tools (such as HTML authoring tools) that try to show their users on-screen 
how final, finished documents will look. 

XHTML (Extensible Hypertext Markup Language): The reformulation of 
HTML 4.0 as an application of XML 1.0. 

XML (Extensible Markup Language): A system for defining, validating, and 
sharing document formats. 
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& (ampersand) 
entities begun with, 23 
entity for displaying, 25 

< > (angle brackets) 
entities for displaying, 24, 25 
including when copying code, 2 
markup enclosed by, 13 

# (asterisk) for multiple-line comments 

(JavaScript), 231 
{ } (brackets) with CSS declarations, 133 
: (colon) separating properties from values 

(CSS), 130 

- (dashes) in comment tags (< !- and ->), 25 

. (dot). See . (period) 

! (exclamation mark) in beginning 

comment tag (< !— ), 25 
404 File or directory not found 

message, 49, 99 
> (greater than sign). See < > (angle 

brackets) 

# (hash mark). See # (pound sign) 

< (less than sign). See < > (angle brackets) 

# (octothorpe). See # (pound sign) 
( ) (parentheses) with JavaScript 

methods, 226 
. (period) 

for accessing JavaScript properties or 

methods, 244 
applying style rule only to class 

(CSS), 134 
in site links (. . /), 98 
starting CSS style rules, 145 

# (pound sign) 

in intradocument linking, 102 
preceding hexadecimal color codes, 163 
starting CSS style rules, 145 



" (quotation marks) 

attribute values enclosed by, 22 

for strings with JavaScript methods, 226 
; (semicolon) 

with CSS declarations, 133 

entities ended by, 23 
/ (slash) 

empty elements ended by, 20 

for JavaScript comments, 231 

in site links (. . /), 98 
[ ] (square brackets) as array operator, 243 
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<a> element. See anchor element (<a>) 
abbr attribute, 211 
About Me page 

adding fonts and colors, 298-300 

audience analysis, 295-296 

components, 296 

home page, 296-298 

markup, 296-300 
absolute, defined, 369 
absolute links, 97. See also links 
absolute property measurement 

values, 129 
accept attribute, 270 
accept-charset attribute of <f orm> 

element, 270 
accessing arrays (JavaScript), 243 
accesskey attribute, 106 
Acrobat Reader (Adobe), 105 
action attribute of <form> element, 
253, 254 

: acti ve pseudo class (CSS), 165, 166 
Add to Cart button (PayPal shopping cart), 

325-327 
Adobe 

Acrobat Reader, 105 

GoLive HTML editor, 337 



HTML 4 For Dummies, 5th Edition 




Adobe (continued) 
Photoshop, 338-339 

bt^M^eeWs, 337-338 
le^Ji^e/f^gjvaScript), 226, 231 
align attribute 
deprecation of, 362 
< h r / > element, 80 
<img /> element, 117-118 
<p> element, 71-72 
<table> element, 199-200 
aligning 
horizontal rule elements, 80 
images and text, 117-118 
justifying text, 71-72 
tables, 199-202 
text blocks with CSS, 171-173 
a 1 i nk attribute (deprecated), 362 
all media type (CSS), 151 
a 1 1 attribute 
<area /> element, 121 
<img /> element, 112 
alternative text for images, 112-113 
Amazon.com 
server-side scripting in, 222 
tables for layout in, 180 
ampersand (&) 
entities begun with, 23 
entity for displaying, 25 
anchor, defined, 369 
anchor element (<a>). See also links 
defined, 95 
fore-mail, 105-106 
for file downloads, 104-105 
href attribute, 95 
for image rollovers, 276 
<img /> element with, 119-120 
as inline element, 96 
moving up a directory level, 98 
name attribute, 102 
for pop-up windows, 285 
target attribute, 100-101 
Andale image-hosting service, 307 
angle brackets (< >) 
entities for displaying, 24, 25 
including when copying code, 2 
markup enclosed by, 13 



animation, avoiding on eBay auction 

page, 305 
appl et element (deprecated), 361 
applets, 216 

a rchi ve attribute of <obj ect> 

element, 290 
<area /> element, 121 
arithmetic operators (JavaScript), 234 
Array object (JavaScript), 243 
arrays (JavaScript) 

accessing, 243 

creating, 243 

defined, 242, 369 

index, 243 

1 ength property, 243-244 
looping through, 243-244 
reading elements, 243 
writing elements, 243 
assignment operators (JavaScript), 
233-234 

asterisk (*) for multiple-line comments 

(JavaScript), 231 
attributes. See also deprecated elements 

and attributes; specific attributes and 

elements 
defined, 19, 369 
deprecated (table), 362-364 
for document structure, 68 
forms-related, 270-272 
for image maps, 121, 122 
image-related, 122 
link-related, 106 
metadata, 64 
object-related, 290-291 
overview, 21-22 

quotation marks for values in, 22 

script- and forms-related, 247 

table-related, 211-212 

text-related, 93-94 
auction sites, 301. See also eBay 

auction page 
audience analysis for About Me page, 

295-296 
aural media type (CSS), 151 
aural properties (CSS), 367-368 
aural (speech sound) styles (CSS), 158 
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axi s attribute, 211 
azimuth property (CSS), 367 
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Back to Top links, 102-103 
background attribute (deprecated), 362 
background color 

background property (CSS), 164, 166-167 

background-col or property (CSS), 
152, 166-167 

bgcol or attribute (deprecated), 33, 211 

for eBay auction page, 305 

setting in CSS, 166-167 

for table cells, 210-211 
background property (CSS) 

background-col or property versus, 167 

overview, 164, 365 

for table cells, 211 

using, 166-167 
background-col or property (CSS) 

background property versus, 167 

overview, 152, 164 

using, 166-167 
background-image property (CSS), 152 
Backup Brain Weblog, 217-219 
bandwidth, 369 

basef ont element (deprecated), 361 
BBEdit helper editor, 335 
bdo element, 93 

beta-testing Web pages, 355-356, 369 
bgcol or attribute, 33, 211, 363 
blinking text, CSS styles for, 176-177 
block elements. See also text blocks 

creating links within, 96 

defined, 369 
block quotes, 74-75, 76 
<bl ockquote> element, 74-75 
blocks of text. See also text; specific kinds 

aligning with CSS, 171-173 

block quotes, 74-75, 76 

defined, 69 

headings, 27, 33, 72-74 
horizontal rules, 27, 79-82 
HTML page as collection of, 69 



indenting with CSS, 173 
inline elements versus, 70 
kinds of, 69 

line breaks, 27, 76, 78-79 

paragraphs, 70-72 

Preformatted text, 75-76, 77 
body, defined, 369 
<body> element 

for cookies, 290 

creating, 67 

CSS styles for text, 146-147 

for "Hello World" example, 33 
body scripts, 226 
boldface, CSS styles for, 174 
bookmarks, 63, 370 
boolean data type (JavaScript), 233 
border attribute 

deprecation of, 363 

<img /> element, 116 

<tabl e> element, 189-191 
border property (CSS), 155, 192-193, 365 
border-bottom property (CSS), 365 
border-col or property (CSS), 155, 192 
border-left property (CSS), 365 
border - right property (CSS), 366 
borders 

CSS styles for, 117 

image-editing tools for, 116 

setting with border attribute, 116 

for tables, 182, 189-193 
border-spaci ng property (CSS), 198-199 
border-styl e property (CSS), 

154, 191-192, 366 
border-top property (CSS), 366 
border-width property (CSS), 

154, 192, 366 
bottom property (CSS), 154 
brackets ({ }) with CSS declarations, 133 
braille media type (CSS), 151 
break element (< b r / >) 

defined, 27 

for "Hello World" example, 34 
overview, 76, 78 
<p> element versus, 78 
using, 78-79 
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broken links 
error messages, 49, 99 

39-340, 354 
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avoiding dependencies, 347 
block quote display by, 75, 76 
color display test page for, 162 
CSS and, 126 
defined, 370 

display rules overridden by CSS, 131-132 

eBay auction page and, 303, 305 

FTP capabilities, 55 

heading display by, 73-74 

image formats and, 109 

image rollovers and, 277 

listed online, 13 

opening linked pages in new window, 

100-101 
previewing pages on, 13, 29 
pseudo classes and, 166 
refreshing view for changed pages, 38 
scaling by, 114-115 

scripts for opening and closing windows, 

100, 219-220 
table display and, 193 
testing pages on variety of, 13, 346 
testing tables in, 206-207 
text-only, 14, 74 

viewing "Hello World" example, 36-37 
wrapping by, 76 
(X)HTML page display by, 67 
bugs, 370 

Builder.com ("Examine Graphic Channels 

and Space"), 110 
building.gif image, 311 
bulleted lists. See also lists 

CSS for, 89 

defined, 86 

formatting, 86-87 

nested elements in, 21 

overview, 27 

specifying kinds of bullets, 87-88 
uses for, 86 



business sites 
company site project, 309-317 
designing for first impressions, 42 
eBay auction page project, 301-308 
product catalog project, 319-330 



calling (JavaScript) 

functions, 241-242 

methods, 244 
canned JavaScript, 215, 225 
capitalization. See case 
<caption> element, 188 
Cascading Style Sheets. See CSS 
Cascading Style Sheets For Dummies 

(Dean, Damon A.), 130 
case 

broken links and, 99 

CSS styles for capitalization, 175-176 

HTML versus XHTML and, 2 

JavaScript and, 230 
category page for product catalog 

described, 320 

illustrated, 321 

template, 327-329 
cell spanning 

attributes for, 202 

cell width versus, 182 

column spans, 202-204 

defined, 182 

row spans, 204-205 

table design and, 185 

for table-based Web page, 189 
eel 1 paddi ng attribute, 196-198 
cells (table), 182 
eel 1 spaci ng attribute, 196-198 
center element (deprecated), 361 
centering. See aligning 
CGI (Common Gateway Interface) scripts, 

266, 267-268, 370 
"CGI Scripts for Fun and Profit" 

(Webmonkey), 267 
char attribute, 211 
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character spacing settings, 171 
charoff attribute, 211 




\q2>s, 257-258 
ibute of <i nput /> element, 
258, 270 
checkSubmi t function, 221 
cite attribute, 93-94 
class attribute (CSS) 
i d attribute versus, 145 
overview, 134-135 
classes (CSS) 
navbar class, 143-144 
overview, 134-135 
quotation class, 170, 171, 173 
cl assid attribute of <object> 

element, 290 
clear attribute (deprecated), 363 
Clear buttons for forms, 263-265 
"click here" links, avoiding, 51 
clients, 370 

client-side scripts. See DHTML 

(Dynamic HTML) 
clock, pop-up window for, 285-286 
clock, self-updating 

adding to Web pages, 282, 284 

described, 280-281 

using HTML and JavaScript, 281-282 

using JavaScript and DOM, 282-284 
CNET Shopper site, 333 
code listings in this book, 2 
codebase attribute of <object> 

element, 291 
codetype attribute of <object> 

element, 291 
<col > element, 188 
<col group) element, 188 
colon (:) separating properties from 

values (CSS), 130 
color attribute (deprecated), 363 
color property (CSS) 

color names with, 162 

overview, 152, 164 

for text, 164-165 



colors 

About Me page example, 298-300 

background color, 33, 152, 166-167, 211 

background property (CSS), 164, 166-167 

background-col or property (CSS), 
152, 166-167 

bgcol or attribute (deprecated), 33, 211 

border-col or property (CSS), 155 

color property (CSS), 152 

for company site, 316-317 

CSS properties for, 164 

for eBay auction page, 305 

hexadecimal codes for, 162-163 

for links, 165-166 

names, 162 

numbers for, 162-164 

for product catalog, 320 

RGB values for, 163-164 

for tables, 210-211 

test page for browser display, 162 

for text, 164-165 
col s attribute of <textarea> element, 263 
col span attribute of <td> element, 

202-204 
comments (JavaScript), 231 
Common Gateway Interface (CGI) scripts, 

266, 267-268, 370 
compact attribute (deprecated), 363 
companion Web site for this book, 1 
company site 

basic elements, 310-311 

contact page, 310, 315-316 

design issues, 309-310 

home page, 310, 31 1-313 

image, 311 

navigation tools, 312-313 

press page, 310 

products page, 310, 313-314 

style sheet, 311,316-317 
comparison operators (JavaScript), 

235-236 
comparison-shopping sites, 333 
concatenation (JavaScript), 236 
concentrating on content, 343-344 
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conditional statements (JavaScript) 
i f statements, 237 

Le/tofejafais, 237-238 

conf i rm( ) method (JavaScript), 237-238 
contact page for company site, 

310, 315-316 
content 
concentrating on, 343-344 
defined, 370 
inline, 373 

keeping fresh, 354-355 

keeping your site interesting, 348-350 
content attribute of <meta /> element, 64 
content property (CSS), 159 
cookies 

adding to Web pages, 290 

defined, 287, 370 

illustrated, 287-288 

script for, 288-289 
coords attribute of <area /> element, 121 
copyright laws, links and, 110 
counter-i ncrement property (CSS), 159 
counter -reset property (CSS), 159 
counting operators (JavaScript), 234-235 
creating a Web page. See also specific 
projects 

About Me page project, 295-300 
company site project, 309-317 
eBay auction page project, 301-308 
editing an existing page, 37-39 
planning your page design, 30-32 
posting your page online, 39-40 
product catalog project, 319-330 
saving your page, 34-36 
software needed for, 29-30 
steps for, 30 

"under construction" sections, 
avoiding, 46 

using templates in this book, 300 

viewing your page, 36-37 

writing basic HTML, 32-34 
cross ki ck . gi f file, 297 
CSS (Cascading Style Sheets). See also 
specific properties 

additional properties (table), 159-160 

advantages of, 126-127, 161 

for aligning tables, 201-202 



applying style rule only to class, 134 
aural properties, 367-368 
aural (speech sound) styles, 158 
background color, 166-167 
browser display rules overridden by, 
131-132 

Candidate Recommendations, 128 

capabilities of, 127-130 

cascading explained, 140 

for cell padding and spacing, 198-199 

color properties, 164 

company site style sheet, 311, 316-317 

CSS3, 128 

declarations, 130-131, 132-133 
defined, 370 

deprecated HTML and, 126 
developing specific styles, 142-149 
in DHTML, 273 

external style sheets, 125, 137, 138-139 
externalizing style sheets, 150 
font styles, 146-149, 167-178 
further information, 130, 137 
goal of, 125 

guidelines for using, 141 
horizontal rule element (< h r / >) 
versus, 82 

inheritance of styles for nested elements, 

135-137 
inline styles, 125, 137, 140 
internal style sheets, 125, 137-138 
JavaScript with, 217-219 
last rule seen and, 166 
link colors, 165-166 
media types, 151 
older browsers and, 126 
overlapping elements, rules for, 146 
overview, 125-126 
paged media styles, 156-158 
Pixel the Cat page example, 142-149 
positioning elements, 145-146 
precedence for multiple rules, 140, 166 
print style sheet, 158 
property measurement values, 129 
pros and cons, 18 

pseudo class selectors, 149, 165-166 
punctuation important in, 133 
selectors, 130, 131, 132-133 
shorthand properties, 144, 365-366 
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steps for using, 127 
style classes, 134-135 



193 

in tables with (X)HTML, 181 
text colors, 164-165 
text rollovers with, 279-280 
visual layouts using, 142-144 
visual media styles, 152-156 
white space and, 133 
W3C validation service, 133 
with XHTML Strict, 18 
"CSS Structure and Rules" (Web Design 

Group), 137 
cue property (CSS), 366 
cue-after property (CSS), 367 
cue-before property (CSS), 367 
curly braces ({ }) with CSS declarations, 133 
cursor property (CSS), 156 
CuteFTP client software, 55 



dashes in comment tags (< ! — and — >), 25 

data attribute of <object> element, 291 

data collection forms, 249, 251-252 

data types (JavaScript), 232-233 

datetime attribute, 94 

<dd> element, 89-90 

Dean, Damon A. (Cascading Style Sheets 

For Dummies), 130 
declarations (CSS) 

applying to collection of selectors, 133 

defined, 130 

for multiple style rules per selector, 
132-133 

properties, 130 

text color and, 164-165 

values, 130 
decl a re attribute of <scri pt> 

element, 247 
declaring (JavaScript) 

functions, 241 

variables, 232 
default, defined, 370 

defer attribute of < s c r i p t > element, 247 
definition lists, 89-90. See also lists 
del element, 93 



dense tables, avoiding, 210 
deprecated elements and attributes 

align attribute, 72, 201,202 

bgcol or attribute, 33, 211 

<body> attributes, 33 

<center> tag for tables, 202 

CSS and, 126 

defined, 18, 161, 370 

empty elements without slash, 20 

formatting elements, 161 

goal of deprecation, 125 

<hr /> attributes, 80 

numbered list attributes, 86 

table of deprecated attributes, 362-364 

table of deprecated elements, 361-362 

text attribute, 33 

type attribute for bulleted lists, 87 

in XHTML Transitional, 18 
descriptions in metadata, 64 
"Design Basics" (Webmonkey), 54 
designing a Web site 

avoiding bells and whistles, 344-345 

benefits of good planning, 30-31, 41 

company site, 309-310 

eBay auction page, 302-305 

encouraging return visitors, 41 

first impressions and, 42 

forms, 268-270 

goals and needs in, 42-44 

"Hello World" example, 31-32 

identifying suitable elements, 43 

links, 49-51 

mapping your site, 44-46 

navigation, 46-49 

product catalog, 320 

professional help for, 42 

with tables for layout, 183-185 

UI design resources, 54 
detail pages for product catalog 

described, 320 

illustrated, 321-322 

template, 329-330 
DHTML (Dynamic HTML) 

cookies, 287-290 

defined, 273, 371 

dynamic content, 280-284 

pop-up windows, 284-287 

rollovers, 274-280 
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Dictionary of HTML META tags, 66 
d i r attribute, 94 
cl| r»lameat t ,(|e>)ii»4:ated), 361 

for images^ 110 
moving up a directory level in relative 

links, 98 
for Web pages, 35 
disabled attribute, 270 
di spl ay property (CSS), 153 
<dl > element, 89-90 
DOCTYPE declarations 
defined, 370 
for HTML, 60 
for XHTML, 61 
document, defined, 370 
Document Object Model. See DOM 
document structure 
basic elements, 59-60 
body, 67 

DOCTYPE declarations, 60-61 
<head> element, 62 
header, 62-66 
<htm1 > element, 61 
identifying your document, 60-62 
importance of, 344 
other attributes, 68 
XHTML namespace, 61-62 
Document Type Definitions (DTDs) 
defined, 371 
for HTML, 60 

HTML validation using, 340-341 
for XHTML, 18, 61 
DOM (Document Object Model) 
defined, 371 
in DHTML, 273 

dynamic content using JavaScript and, 

282-284 
overview, 246-247 
domain name 
defined, 53, 371 
getting your own, 53-54 
nameservers, 374 
in URLs, 15 



do's and don'ts 
avoid bells and whistles, 344-345 
concentrate on content, 343-344 
create well-formulated HTML and test, 
346-348 

keep your site interesting, 348-350 
dot (.) 

for accessing JavaScript properties or 

methods, 244 
applying style rule only to class (CSS), 134 
in site links (. . /), 98 
starting CSS style rules, 145 
dot syntax, 371 

double justifying paragraphs, 71 
download time. See performance 
downloading files, links for, 104-105 
Dreamweaver HTML editor (Macromedia) 

browser preview in, 30 

file-management capabilities, 55 

HTML code hidden by, 30 

overview, 336-337 
drop-down lists for forms, 260-262 
<dt> element, 89-90 
DTDs (Document Type Definitions) 

defined, 371 

for HTML, 60 

HTML validation using, 340-341 

for XHTML, 18, 61 
Dummies.com site 

JavaScript example, 216-217 

JavaScript resources, 248 

navigation example, 47-48 

page templates, 300 
dynamic content 

adding to Web pages, 282, 284 

described, 280 

using HTML and JavaScript, 281-282 
using JavaScript and DOM, 282-284 
Dynamic HTML (DHTML) 
cookies, 287-290 
defined, 273, 371 
dynamic content, 280-284 
pop-up windows, 284-287 
rollovers, 274-280 
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Etion Kit tools, 342 

reKwrauftftufila! " 

designing, 302-305 
image-hosting services, 307 
overview, 301 
presentation issues, 305 
using a template, 306-308 
e-commerce. See company site; eBay 

auction page; product catalog 
E-Commerce For Dummies (Wiley 

Publishing), 52 
editing Web pages, 37-39 
elements. See also deprecated elements 
and attributes; tags; specific elements 
defined, 13, 19, 371 
deprecated (table), 361-362 
empty, 20, 110-111 
for image maps, 121 
inline, defined, 70 
inline, text blocks versus, 70 
limited to those specified, 21 
nesting, 21 

singleton tags, 20-21, 110 
table components, 185-186, 188 
tag pairs, 19-20 
text controls, 93 
types of, 19 

(X)HTML structure and, 25-26 
el evati on property (CSS), 367 
e-mail addresses 

for company site contact page, 316 

linking to, 105-106, 266, 268 
email .gif file, 297 
embedding content with <object> 

element, 290-291 
embossed media type (CSS), 151 
empty elements 

defined, 20, 371 

HTML versus XHTML and, 20 

<img /> element as, 110-111 
empty-cells property (CSS), 159 



enctype attribute of <f orm> element, 271 
entities 
defined, 19 

non-ASCII characters, 22-24 

tag characters, 24-25 

(X)HTML character codes, 24 
entity, defined, 371 
error messages 

for broken links, 49, 99 

defined, 371 
events (JavaScript) 

defined, 245, 371 

event handlers, 245-246 

for image rollovers, 276 

for pop-up windows, 285 
evolving your Web site, 348-349 
"Examine Graphic Channels and Space" 

(Builder.com), 110 
exclamation mark in beginning comment 

tag (<!-), 25 
expansion, planning for, 45-46 
expiration date, setting with <meta /> 

element, 66 
expressions (JavaScript) 

defined, 233, 371 

operators, 233-236 

statements, 236 
Extensible Hypertext Markup Language 
(XHTML). See also HTML (Hypertext 
Markup Language) 

case and, 2 

character codes, 24 

color values, 162-164 

components, 19 

conventions for code listings, 2 

with CSS in tables, 181 

defined, 378 

D0CTYPE declarations, 61 
DTDs, 18 

HTML versus, 2, 16-18, 20 
namespace, 61-62 
specifications, 17 

text controls and annotation (table), 93 
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Extensible Hypertext Markup Language 



(continued) 




es, 93-94 



wrapped lines in this book, 2 
XML as basis of, 17 
Extensible Markup Language (XML) 
defined, 378 
empty elements and, 20 
XHTML based on, 17 



external script files (JavaScript) 

example, 228-229 

referenced by <scri pt> element, 
227-228 
external style sheets (CSS) 

benefits of, 138 

creating from internal style sheets, 150 
defined, 125, 137, 371 
importing, 139 
linking to, 139, 150 
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feedback 
on site design, getting, 42 
from users, soliciting, 43, 357-358 
Fetch FTP client software, 342 
Fielding, Roy (MOMspider creator), 
340, 354 

fields for form input. See also form 
input tags 

check boxes, 257-258 

drop-down lists, 260-262 

file upload fields, 259-260 

hidden fields, 259 

overview, 254 

password fields, 256-257 

radio buttons, 257-258 

text fields, 255-256 

value associated with name by, 254 
file downloads, links for, 104-105 
File Transfer Protocol (FTP) 

clients, 55, 341-342 

described, 16 

posting your Web pages via, 39, 55 
file upload fields for forms, 259-260 



filename extensions 

broken links and, 99 

. htm versus . html , 35-36 
filenames 

broken links and, 99 

spaces in, avoiding, 35 

in URLs, 15 
Fireworks (Macromedia), 339 
FirstGov site, 10-11 
f 1 oat property (CSS), 155 
: focus pseudo class (CSS), 165, 166 
folders or directories 

for images, 110 

moving up a directory level in relative 
links, 98 

for Web pages, 35 
font element (deprecated), 362 
font property (CSS), 177-178, 366 
font styles (CSS) 

aligning text blocks, 171-173 

for body text, 146-147 

boldface, 174 

capitalization, 175-176 

common font families, 168 

for company site, 316-317 

font face settings, 167-168 

font size settings, 168-169 

generic font families, 168 

for headings, 147-148 

italics, 174-175 

letter spacing (kerning), 171 

line height settings, 169-171 

for link display, 149 

switching dynamically with JavaScript, 
217-219 

text-decorati on property (CSS), 
149, 153, 176-177 

word spacing (tracking), 171 
f ont-f ami ly property (CSS), 

133, 147, 152, 167-168 
fonts. See also font styles (CSS) 

for About Me page, 299 

for eBay auction page, 305 
font-size property (CSS), 152, 168-169 
font-style property (CSS), 174-175 
font-weight property (CSS), 149, 152, 174 
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footer, 371 
for attribute, 271 

JavaScript resources, 248 
navigation example, 47-48 
page templates, 300 
for loops (JavaScript), 238-239 
<f orm> element 
acti on attribute, 253 
for dynamic clock, 282 
form input elements associated with, 253 
method attribute, 253 
onsubmit attribute, 221 
form handlers 
defined, 253, 372 
for simple form, 253-254 
form input tags 
check boxes, 257-258 
drop-down lists, 260-262 
file upload fields, 259-260 
hidden fields, 259 
input fields, 254-262 
multi-line text boxes, 262-263 
password fields, 256-257 
radio buttons, 257-258 
Reset buttons, 263-265 
Submit buttons, 263-265 
text fields, 255-256 
value associated with name by, 254 
formatting text. See also CSS (Cascading 
Style Sheets); font styles (CSS); lists 
block quotes, 74-75, 76 
headings, 27, 33, 72-74 
horizontal rules, 27, 79-82 
justifying, 71-72 
line breaks, 27, 76, 78-79 
paragraphs, 70-72 
using preformatted text, 75-76, 77 
forms. See also form input tags 
attributes, 247, 270-272 
CGI scripts for, 266, 267-268 
creating, 252-266 

data collection forms, 249, 251-252 
defined, 372 

designing user-friendly forms, 268-270 



examples online, 250-252, 269-270 

form handlers, 253 

input tags, 254-265 

processing data, 266-268 

search forms, 249, 250-251 

sending data by e-mail, 266, 268 

structure, 253-254 

uses for, 249-252 

validation, 221-223, 265-266 
404 File or directory not found 

message, 49, 99 
frame attribute, 212 
frames, 18 

FrontPage HTML editor (Microsoft) 

HTML code hidden by, 30 

overview, 337 
FTP (File Transfer Protocol) 

clients, 55, 341-342 

described, 16 

posting your Web pages via, 39, 55 
function data type (JavaScript), 233 
functions (JavaScript) 

basic structure, 241 

calling, 241-242 

declaring, 241 

defined, 240, 372 

function block, 241 

uses for, 241 
future expansion, planning for, 45-46 
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gateway Web sites, 10, 372 
ghost sites, 350 

GIF (Graphics Interchange Format) images, 

108, 109 
Gmail, 223-224 
goals 
of CSS, 125 

site design and, 42-44 
GoLive HTML editor (Adobe), 337 
Google 

Gmail, 223-224 

tables for layout in, 180, 182 
graphical browsers. See browsers 
Graphical User Interface (GUI), 372 
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graphics. See images 
graphics files, 372 

ai v^t I»teif:J>aj»gf Format (GIF) images. 

greater than sign (>). See angle brackets 

(<>) 
greeked text, 314 

GUI (Graphical User Interface), 372 




handhel d media type (CSS), 151 
hard returns, ignored by HTML, 70, 75 
hash mark (#) 

in intradocument linking, 102 

preceding hexadecimal color codes, 163 

starting CSS style rules, 145 
head, defined, 372 
<head> element 

adding to document, 62 

dynamic content in, 282, 284 

for "Hello World" example, 33 

overview of head section, 26 

for pop-up windows, 285 

prof i 1 e attribute, 68 

for text rollovers, 280 

<ti tl e> element within, 62-63 
header 

<head> element, 62 

metadata in, 63-65 

overview, 62 

<ti tl e> element, 62-63 
header scripts, 226 
headings 

aligning, 172-173 

browser display of, 73-74 

creating, 73 

CSS styles for, 147-148 

defined, 372 

first-level (h 1), 33 

for "Hello World" example, 33 

<hl> through <h6> elements for, 27, 72 

overview, 27 

for tables (<thead> element), 188 
text rollovers for, 279-280 
uses for, 72 



height attribute of < i m g / > element, 

114-115 
height property (CSS), 155 
height window parameter 

(JavaScript), 287 
"Hello World" Web page 

editing, 37-38 

planning, 30-32 

posting online, 39-40 

saving, 34-36 

URL for example, 40 

viewing, 36-37 

writing HTML for, 32-34 
helper applications, 372 
helper editors, 334-336 
hexadecimal color codes, 162-163 
hexadecimal, defined, 372 
hidden fields for forms, 259 
History list in browser, document title 

and, 63 
home page 

About Me page, 296-298 

company site, 310, 311-313 
HomeSite+ HTML editor (Macromedia), 
334-335 

<hl> through <h6> elements. See headings 
horizontal alignment of tables, 

199-200, 201-202 
horizontal rule element (< h r / >) 

attributes, 80-81 

CSS versus, 82 

defined, 27, 79 

LANWrights, Inc site example, 80, 82 

uses for, 79 

using, 79-80 
host, defined, 51 
hosting your Web site 

changing your decision, 52 

choices for, 51 

defined, 51 

doing it yourself, 52 

finding, 39 

form processing applications and, 267 

further information, 52 

getting a domain, 53-54 

moving files to your Web server, 54-56 
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professional help for, 52 
using a hosting provider, 52 
"^ejj^Dsaudbilaj^ (CSS), 165, 166 

3 / x^v/ 1 r"tS)f a ' ru ' e e l emen t 
href attribute of anchor element. See 

also links 

for file downloads, 104-105 

for intradocument links, 102-104 

for mai 1 to : links, 106 

overview, 95 

URL specified in, 95, 96 
href attribute of <area /> element, 121 
href 1 an g attribute, 106 
h space attribute 

deprecation of, 363 

<img /> element, 118-119 
.htm suffix, 35-36, 99 
HTML editors 

benefits of, 334 

browser preview in, 14 

helper editors, 334-336 

HTML code hidden by, 30 

WYSIWYG editors, 336-337 
<html > element 

in document structure, 61 

for "Hello World" example, 33 
HTML 4 For Dummies (Tittel, Ed and 
Negrino, Tom and Smith, Dori) 

assumptions about the reader, 3 

companion Web site, 1 

organization, 3-5 

overview, 1-2 

page templates, 300 

using, 2-3, 6 
HTML Frameset D0CTYPE declaration, 60 
HTML (Hypertext Markup Language). See 
also XHTML (Extensible Hypertext 
Markup Language) 

for auction site item descriptions, 301 

case and, 2 

character codes, 24 

color values, 162-164 

components, 19 

conventions for code listings, 2 



with CSS in tables, 181 

defined, 10, 373 

in DHTML, 273 

Dictionary of META tags, 66 

D0CTYPE declarations, 60 

dynamic content using JavaScript and, 
281-282 

hypertext, 10-11 

markup, 11-13 

organizing text, 26-27 

specifications, 16-17 

text controls and annotation (table), 93 

text-related attributes, 93-94 

usage in this book, 1 

wrapped lines in this book, 2 

XHTML versus, 2, 16-18, 20 
HTML Strict D0CTYPE declaration, 60 
.html suffix, 35-36, 99 
HTML toolbox. See also image-editing 
tools; software 

FTP clients, 55, 341-342 

helper editors, 334-336 

HTML validators, 340-341, 346, 356-357 

link checkers, 339-340, 354 

overview, 333 

Swiss army knives, 342 

WYSIWYG editors, 336-337 
HTML Toolbox (NetMechanic), 342 
HTML Transitional D0CTYPE 

declaration, 60 
HTML validators, 340-341, 346, 356-357 
HTML-Kit editor, 30, 336, 342 
HTTP (Hypertext Transfer Protocol), 
16, 373 

http : / / in URLs for links, 99 
"HTTP Transactions and You" 

(Webmonkey), 16 
http-equi v attribute of <meta /> 

element, 65-66, 354 
hyperlinks. See links 
hypermedia, 373 
hypertext, 10-11 

Hypertext Markup Language. See HTML 
Hypertext Transfer Protocol (HTTP), 
16,373 
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BoQOkSsus (CSS), 145 

for text, 94 
i f statements (JavaScript), 237 
i f/el se statements (JavaScript), 237-238 
IIS (Internet Information Server) by 

Microsoft, 52 
image maps 

adding to Web pages, 121 

defined, 373 

described, 120 

elements and attributes for, 121, 122 

image-editing tools for, 122 

markup for, 121-122 

requirements for creating, 120 

uses for, 122 
image rollovers 

active (on) state, 274, 275 

adding to Web pages, 276 

browsers and, 277 

defined, 373 

image files for, 275 

inactive (off) state, 274 

JavaScript code for, 275 

preloading, 276-277 

text rollovers versus, 278 
image-editing tools 

for borders, 116 

hexadecimal color codes and, 163 
for image maps, 122 
Macromedia Fireworks, 339 
Photoshop, 338-339 
Photoshop Elements, 337-338 
for sizing images, 116 
images. See also <i mg / > element 
adding to Web pages, 110-119 
aligning text and, 117-118 
alternative text for, 112-113 
for attractive Web pages, 345 
border settings, 116-117 
for company site, 311 
creating Web-friendly images, 108-1 10 
for eBay auction page, 302, 304-305, 
306, 307-308 



effective versus ineffective use of, 107 
formats for, 108-109 
going easy on, 344-345 
graphics format information online, 110 
image-hosting services, 307 
links using, 119-122 
locations for storing, 110 
for navigation, text versus, 184 
optimizing, 109 
for product catalog, 320 
rollovers with JavaScript, 274-277 
size specification for, 114-116 
table design and, 184 
in tables, 205-206,210 
uses for, 107-108 
white space settings, 118-119 
<img /> element 
align attribute, 117-118 
alt attribute, 112 

with anchor element (<a>), 119-120 

border attribute, 116 

height attribute, 114-115 

h space attribute, 118-119 

for image rollovers, 276 

overview, 21 

src attribute, 21-22, 111 

u semap attribute, 121 

using, 110-111 

v space attribute, 118-119 

width attribute, 114-115 
©import statement (CSS), 139, 150 
importing external style sheets (CSS), 139 
indenting text with CSS, 173 
index of arrays (JavaScript), 243 
index.html page for company site, 

310, 311-313 
inheritance of CSS styles 

complex style sheets and, 137 

defined, 373 

overview, 135-136 
inline content, 373 
inline elements 

anchor elements as, 96 

defined, 70, 373 

text blocks versus, 70 
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inline styles (CSS) 
caveats for, 140 
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<i nput /> element 



for check boxes, 257-258 

checked attribute, 258 

for custom buttons, 265 

for dynamic clock, 282 

for file upload fields, 259 

for hidden fields, 259 

for JavaScript clock, 281-282, 284 

maxlength attribute, 255 

name attribute, 258, 259 

for password fields, 256 

for radio buttons, 257-258 

for Reset buttons, 263-265 

si ze attribute, 255 

src attribute, 265 

for Submit buttons, 263-265 

for text fields, 255-256 

type attribute, 255, 256, 257, 259, 
263-264, 265 

val ue attribute, 258, 263-264, 265 
input tags. See form input tags 
i n s element, 93 

Internal Revenue Service (IRS) search 

forms, 250-251 
internal style sheets (CSS) 

creating external style sheets from, 150 

defined, 125, 137, 373 

using, 137-138 
Internet connection for hosting your 

site, 52 
Internet Protocol (IP), 374 
Internet resources 

Backup Brain Weblog, 217 

BBEdit helper editor, 335 

CGI information, 266, 267 

CGI scripts, 268 

character code information, 24 

color display test page for browsers, 162 

companion site for this book, 1 

comparison-shopping sites, 333 

CSS information, 130, 137 

CSS3 information, 128 



Dictionary of HTML META tags, 66 
DOM information, 247 
Dreamweaver HTML editor, 336 
Dummies.com site, 47-48, 216-217, 

248, 300 
FirstGov site, 10-11 
forms examples, 250-252 
FrontPage HTML editor, 337 
FTP clients, 55, 342 
ghost site information, 350 
Gmail, 223-224 
GoLive HTML editor, 337 
graphics format information, 110 
greeked text, 314 
"Hello World" Web page, 40 
hexadecimal color charts, 163 
hexadecimal system information, 163 
HomeSite+ HTML editor, 334 
HTML and XHTML specifications, 17 
HTML-Kit editor, 336 
"HTTP Transactions and You" article, 16 
image-hosting services, 307 
JavaScript examples, 219 
JavaScript information, 248, 266 
link checkers, 340, 354 
Macromedia Fireworks, 339 
<object> element information, 291 
optimization tutorials, 109 
page templates in this book, 300 
PayPal site, 325 
site map examples, 44-45, 46 
spell-checking tools, 353 
Swiss army knives, 342 
table layout examples, 180, 181, 182 
TextPad text editor, 30 
UI design information, 54 
Web Accessibility Initiative (WAI), 113 
"Web Hosting for Under Ten Bucks" 

article, 53 
White House home page, 107-108 
W3C HTML validator, 341, 356 
W3C site, 17 
Yahoo! browser list, 13 
Yahoo! Merchant Solutions, 324 
Zen Cart software, 324 
Internet Service Provider (ISP), 373 
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intradocument linking 
considerations for, 101 

k in the same page, 



to named locations i 



to named locations in the same site, 103 
to named locations on other sites, 

103-104 
naming link locations, 102 
pound sign for, 102 
IP (Internet Protocol), 374 
IRS (Internal Revenue Service) search 

forms, 250-251 
i si ndex element (deprecated), 362 
ISP (Internet Service Provider), 373 
italics, CSS styles for, 174-175 



Java 

defined, 374 

JavaScript versus, 216 
JavaScript. See also methods (JavaScript) 

for arranging content dynamically, 
217-219 

arrays, 242-244 

basic syntax rules, 230-231 

canned scripts, 215, 225 

case-sensitivity, 230 

comments, 231 

common uses for, 223-224 

components, 229-230 

concatenation, 236 

for controlling pop-up windows, 
100, 219-220, 285-286 

for cookies, 288-290 

CSS with, 217-219 

data types, 232-233 

in DHTML, 273 

Document Object Model (DOM), 246-247 
Dummies.com example, 216-217 
dynamic content using DOM and, 282-284 
dynamic content using HTML and, 

281-282 
for dynamic pages, 216-217 
events and event handling, 245-246 
expressions, 233 
external script file, 228-229 



external script reference, 227-228 

for form validation, 221-223, 265-266 

functions, 240-242 

further information, 248, 266 

Gmail use of, 223-224 

header script example, 226 

header versus body scripts, 226 

image rollovers with, 274-277 

including scripts in Web pages, 225-226 

Java versus, 216 

loops, 238-240 

objects, 244 

operators, 233-236 

preloading for image rollovers, 276-277 
script- and forms-related attributes, 247 
<scri pt> element as container for, 

225-226 
scripts defined, 215 
statements, 230, 236-238 
for user input validation, 

221-223, 265-266 
using same script on multiple pages, 

227-229 
variables, 231-232 
white space in, 230-231 
window parameters, 286-287 
JPEG (Joint Photographic Experts Group) 

images, 108, 109 
. j s files 

example, 228-229 

referenced by <scri pt> element, 
227-228 
Juicy Studio site, 291 
justifying paragraphs, 71 



kbd element, 93 

kerning (word spacing), 171 

keywords in metadata, 63, 64 
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1 abel attribute, 271 
1 a n g attribute, 94 
LANWrights, Inc site, 80, 82 
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layout. See also designing a Web site 
defined, 374 

DropiW&g 347 

t tables for, 179-180, 182, 183-185 
visual layouts using CSS, 142-144 
left property (CSS), 154 
1 ength property (JavaScript arrays), 
243-244 

less than sign (<). See angle brackets (< >) 
1 etter-spaci ng property (CSS), 171 
< 1 i > element 

defined, 21, 83, 86 

in numbered lists, 83-84 
Library of Congress (LOC) form, 252 
line breaks. See also break element 
(<br />) 

ignored by HTML, 75 

wrapping by browsers and, 76 
line height settings, 169-171 
1 ine- height property (CSS), 152, 170-171 
lines. See horizontal rule element (< h r / >) 
link attribute (deprecated), 363 
<link> element (CSS) 

for external style sheets, 137, 150 

using, 139 

: 1 i nk pseudo class (CSS), 165, 166 
links 

absolute links, 97 

attributes related to, 106 

Back to Top, 102-103 

basic link structure, 95-96 

broken, 49 

"click here," avoiding, 51 
colors, 165-166 
copyright laws and, 110 
CSS styles for displaying, 149 
defined, 95, 374 

to external style sheets (CSS), 139, 150 

for file downloads, 104-105 

http:// in URLs, 99 

hyperlinks defined, 10 

image maps for, 120-122 

images as, 119-120 

kinds of targets for, 97 

link checkers, 339-340, 354 

to locations within Web pages, 101-104 



to non-HTML resources, 104-106 

off-site, choosing, 49-50 

opening documents in new windows, 

100-101 
overview, 28 

populating table cells, 205-206 

pros and cons, 49 

pseudo class selectors with (CSS), 
149, 165-166 

for redirector page, 65-66, 354 

relative links, 97-98 

requirements for creating, 95 

simple links, 98 

site links, 98 

text for, 50-51,95 

URL for, 95 
lists. See also specific kinds 

bulleted lists, 21, 27, 86-88 

components, 82 

CSS styles for, 86, 89, 90 

definition lists, 89-90 

kinds of, 82 

nesting, 27, 91-92 

numbered lists, 83-86 

overview, 27 

spacing items in, 90 
1 i st- sty 1 e property (CSS), 366 
1 i st- sty 1 e- image property (CSS), 153 
1 i st-styl e-posi ti on property 

(CSS), 153 
1 i st-styl e-type property (CSS), 153 
LOC (Library of Congress) form, 252 
local pages 

defined, 14 

refreshing browser after changing, 38 

viewing, 14, 36-37, 38 
location window parameter 

(JavaScript), 286 
loops (JavaScript) 

for loops, 238-239 

looping through arrays, 243-244 

uses for, 238 

whi le loops, 238, 239-240 
Lopuck, Lisa (Web Design For Dummies), 54 
lowercase. See case 
Lynx text-only browser, 14 
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rawpsajfer wiyi#L editor, 
30, 55, 336-337 
Fireworks, 339 

HomeSite+ HTML editor, 334-335 
mai 1 to : links 

anchor element for, 105-106 

for forms, 266, 268 
Mander, Richard (Web Usability For 

Dummies), 54 
<map> element, 121 
mapping your site 

deciding whether to use a site map, 46 

example maps, 44-45, 46 

navigation tool choices and, 48 

planning for expansion, 45-46 

for site development, 44-45 

site map defined, 376 

using site maps for testing, 351, 352 

as visual guide for users, 46 
margi n property (CSS), 144, 155 
margin-bottom property (CSS), 159 
margi n-1 eft property (CSS), 159 
margin-right property (CSS), 1 59 
margi n-top property (CSS), 159 
marker-offset property (CSS), 160 
marks property (CSS), 160 
markup. See also elements; tags 

angle brackets enclosing, 13 

defined, 11, 374 

for image maps, 121-122 

sample HTML markup, 12-13 

sanitizing for tables, 208 

for simple form, 253-254 

white space in, 208 
markup language, 374 
maxl ength attribute of <i nput /> 

element, 255 
measurement values, 129 
media styles (CSS) 

aural (speech sound) styles, 158 

paged media styles, 156-158 

visual media styles, 152-156 



media types (CSS), 151, 374 
menu element (deprecated), 362 
m e n u b a r window parameter 

(JavaScript), 286 
<meta /> element 

automatically redirecting users, 
65-66, 354 

Dictionary of HTML META tags, 66 

http equiv attribute, 65-66 

name and content attributes, 64 

page appearance not affected by, 67 

scheme attribute, 68 

setting page expiration date, 66 

uses by developers, 65 
metadata 

defined, 63, 374 

elements and attributes, 64 

kinds included for Web pages, 63 

uses by developers, 65 
method attribute of <f orm> element, 

253, 271 
methods (JavaScript) 

alertC ), 226, 231 

calling, 244 

confi rm( ), 237-238 

defined, 244, 374 
Microsoft 

FrontPage HTML editor, 30, 337 

IIS, 52 

Word, saving files as text documents, 32 
MOMspider link checker, 340, 354 
moving files. See posting your Web pages 
multi-line text boxes for forms, 262-263 
multimedia 

defined, 374 

embedding content with <object> 

element, 290-291 
mul ti pi e attribute of <sel ect> 

element, 271 
music, avoiding on eBay auction page, 305 
MySQL/PHP Database Applications (Wiley 

Publishing), 323 
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>), 102 
for form controls, 271 
<f orm> element, 271 
< i n p u t / > element, 258, 259 
<map> element, 121, 122 
<meta /> element, 64 
<select> element, 260, 271 
names 
color names, 162 
domain name, 53-54 
for folders, 35 
for link locations, 102 
linking to named locations, 102-104 
metadata, 64 

suffixes for Web page files, 35-36 

title of Web page, 62-63 

variables (JavaScript), 232 

for Web page files, 35 
nameservers, 374 
namespaces, 61-62 
navbar class, 143-144 
navigation bar, defined, 375 
navigation, defined, 375 
navigation tools 

for company site, 312-313 

defined, 28 

Dummies.com example, 47-48 
factors affecting type of, 46-47 
goals and design of, 43 
image rollovers, 274-277 
images versus text, 184 
navigation bar, 47, 48 
for product catalog, 319, 320, 321 
return visitors and, 41 
site maps for, 46, 48 
sub-navigation areas, 47-48 
text rollovers, 277-280 
tips, 348 

Negrino, Tom (HTML 4 For Dummies), 1-6 
nesting 

close first what you opened last rule, 92 
defined, 21,375 



inheritance of CSS styles and, 135-137 
lists, 27, 91-92 

<pre> element inside <bl ockquote> 
elements, 76 

tables, 208-210 
NetMechanic's HTML Toolbox, 342 
Nielson, Jakob (Web site designer), 54 
n o h r e f attribute of<area /> element, 1 22 
n os hade attribute 

deprecation of, 363 

< h r / > element, 80 
Notepad text editor 

editing Web pages with, 10 

as native Windows editor, 30 
now rap attribute (deprecated), 363 
null data type (JavaScript), 233 
number data type (JavaScript), 233 
numbered lists 

CSS for, 86 

defined, 83 

elements used for, 83 

formatting, 83-84 

numbering styles, 85-86 

starting number, 84-85 
numbers for colors 

hexadecimal color codes, 162-163 

RGB values, 163-164 
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object data type (JavaScript), 233 
<object> element, 290-291 
"Objects, Images, and Applets" (W3C), 291 
objects (JavaScript) 

accessing properties or methods, 244 

defined, 375 

overview, 244 
oblique text, CSS styles for, 174-175 
octothorpe (#) 

in intradocument linking, 102 

preceding hexadecimal color codes, 163 

starting CSS style rules, 145 
< o 1 > element 

attributes, 84-86 

defined, 83 
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onsubmit attribute of <form> element, 221 
open ing. See also pop-up windows 

linked pages in new window, 100-101 
operators (JavaScript) 
for accessing arrays, 243 
arithmetic operators, 234 
assignment operators, 233-234 
comparison operators, 235-236 
counting operators, 234-235 
defined, 233, 375 
<opti on> element 
for drop-down lists, 260-261, 262 
sel ected attribute, 262 
val ue attribute, 260 
orphans property (CSS), 157 
outl i ne property (CSS), 366 
overf 1 ow property (CSS), 160 
overlining, CSS styles for, 176-177 



<p> element 
align attribute, 71-72 
< b r / > element versus, 78 
closing tag usage, 71 
creating a paragraph, 70-71 
defined, 27 

for "Hello World" example, 34 

for text fields in forms, 255 
padding property (CSS) 

overview, 156, 366 

as shorthand property, 144 

for tables, 198 
padding table cells 

eel 1 paddi ng attribute for, 196-198 

CSS styles for, 198 

defined, 196 
paddi ng-bottom property (CSS), 160 
paddi ng - 1 eft property (CSS), 160 
paddi ng-ri ght property (CSS), 160 
padding top property (CSS), 160 
page property (CSS), 160 
©page property (CSS), 159 
page templates. See templates 
page-brea k-af ter property (CSS), 157 
page-break-before property (CSS), 157 



page-break-inside property (CSS), 157 
paged media styles (CSS), 156-158 
pages, defined, 375 
paragraphs. See <p> element 
pa ram element (deprecated), 362 
parentheses [()] with JavaScript 

methods, 226 
password fields for forms, 256-257 
paths in URLs, 15 
pause property (CSS), 366 
pause-after property (CSS), 367 
pause-before property (CSS), 367 
PayPal shopping cart 

accounts for, 323, 325 

Add to Cart button, 325-327 

adding to Web pages, 324-325 

overview, 323 

PayPal site, 325 

View Cart button, 327 
PC Magazine Web site, 333 
PDF files, links for, 104-105 
peer reviews, 356 
performance 

JavaScript and, 217 

location for storing images and, 110 

nested tables and, 208 
period (.) 

for accessing JavaScript properties or 
methods, 244 

applying style rule only to class 
(CSS), 134 

in site links (. . /), 98 

starting CSS style rules, 145 
Perl, 375 
personas, 310 
photographs. See images 
Photoshop (Adobe), 338-339 
Photoshop Elements (Adobe), 337-338 
pitch property (CSS), 367 
pitch-range property (CSS), 367 
Pixel the Cat Web page 

font styles, 146-149 

positioning elements, 145-146 

visual layouts, 142-144 

without styles, 142, 143 
planning 

encouraging return visitors, 41 

for future expansion, 45-46 

goals and site design, 42-44 
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"Hello World" example, 31-32 
jinks, 49-51 

W 

page design, 30-31, 41 
play-during property (CSS), 367 
plug in, 375 

PNG (Portable Network Graphics) 

images, 109 
POP (Post Office Protocol), 16 
populating table cells, 205-206 
pop-up windows 

adding to Web pages, 286 

JavaScript for controlling, 
100, 219-220, 285-286 

JavaScript parameters, 286-287 

opening linked pages in, 100-101 

simple example, 285-286 

uses and abuses of, 219, 284-285 
Portable Network Graphics (PNG) 

images, 109 
position property (CSS), 145, 154 
positioning elements with CSS, 145-146 
Post Office Protocol (POP), 16 
posting your Web pages 

choices for, 54 

steps for, 39-40 

using FTP, 55 

using hosting provider's Web site, 55-56 
pound sign (#) 

in intradocument linking, 102 

preceding hexadecimal color codes, 163 

starting CSS style rules, 145 
<pre> element 

nesting inside <bl ockquote) 
elements, 76 

white space displayed with, 75-76, 77 
Preformatted text, 75-76, 77 
preloading for image rollovers, 276-277 
press page for company site, 310 
pri nt media type (CSS), 151 
processing form data 

determining your needs, 266-267 

sending data by e-mail, 268 

using CGI scripts and other programs, 
267-268 
product catalog 

category page, 320, 321, 327-329 

components, 319-320 



design basics, 320 

detail pages, 320, 321-322, 329-330 

e-commerce books, 323 

navigation interface, 319, 320, 321 

printed versus online, 319 

resources used for, 321 

shopping cart, 320, 322-327 
products page for company site, 

310, 313-314 
profile attribute of < h e a d > element, 68 
programming languages 

for CGI, 267 

embedding content with <object> 
element, 290-291 
programs. See software; specific programs 
projection media type (CSS), 151 
properties. See also specific properties 

of declarations (CSS), 130 

defined, 375 

of objects (JavaScript), 244 
property measurement values, 129 
protocols in URLs, 15 
pseudo class selectors (CSS), 149, 165-166 
pseudo classes (CSS) 

: acti ve, 165, 166 

defined, 375 

: focus, 165, 166 

: hover, 165, 166 

rlink, 165, 166 

: vi si bl e, 166 

: vi si ted, 165, 166 
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quotati on class (CSS), 170, 171, 173 

quotation marks (") 
attribute values enclosed by, 22 
for strings with JavaScript methods, 226 

quotes property (CSS), 160 



radio buttons for forms, 257-258 
RateGenius data collection forms, 

251-252, 269-270 
reading array elements (JavaScript), 243 
readonly attribute, 271 
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redirector page 
http-equi v attribute of <meta /> 

BlameBUdr^i^e, 354 

registering a domain name, 53-54 
relative, defined, 375 
relative links. See also links 

defined, 97 

guidelines for, 97-98 

moving up a directory level, 98 

simple links, 98 

site links, 98 
relative property measurement values, 129 
Reset buttons for forms, 263-265 
resizable window parameter 

(JavaScript), 287 
resizing images, 114-116 
resource, 376 

rgb property (CSS), 163-164 
RGB values for colors, 163-164 
richness property (CSS), 367 
right justifying paragraphs, 71 
right property (CSS), 153 
robot, 376 
rollovers 
defined, 274 

image, with JavaScript, 274-277 

text, with CSS, 279-280 
rows attribute of <textarea> element, 263 
rowspan attribute of <td> element, 

202, 204-205 
rules attribute, 212 

•5» 

s element (deprecated), 362 

samp element, 93 

sansSty 1 e .ess style sheet, 218 

saving 

changes to Web pages, 38 

Web pages, 34-36 

Word files as text documents, 32 
scheme attribute of <meta /> element, 68 
scope attribute, 212 
screen, 376 

screen media type (CSS), 151 
<scri pt> element 



checkSubmi t function in, 221 

for cookies, 290 

declare attribute, 247 

defer attribute, 247 

for dynamic clock, 282, 284 

with external script reference, 227-228 

header script example, 226 

for image rollovers, 276 

for pop-up windows, 285 

as script container, 225-226 

sre attribute, 227, 228 
scripting language, 376 
scripts. See also DHTML (Dynamic HTML); 
JavaScript 

for arranging content dynamically, 
217-219 

canned JavaScript, 215, 225 

common uses for, 223-224 

for controlling pop-up windows, 
100, 219-220, 285-286 

for cookies, 288-290 

defined, 215, 376 

eBay auction page and, 303 

external script reference, 227-228 

for form validation, 221-223, 265-266 

header script example, 226 

header versus body, 226 

including in Web pages, 225-226 

<scri pt> element as container for, 
225-226 

server-side scripting, 222 

using on multiple pages, 227-229 
scrollbars window parameter 

(JavaScript), 287 
search engines 

defined, 376 

< t i 1 1 e > element contents and, 63 
search forms, 249, 250-251 
<sel ect> element, 260-261 
sel ected attribute of <opti on> 

element, 262 
selectors (CSS) 

applying declaration to collection of, 133 

defined, 130, 376 

multiple style rules per selector, 132-133 
pseudo class selectors, 149, 165-166 
text color and, 164-165 
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semicolon (;) 
with CSS declarations, 133 
fenltpa ^*^elsJa>-2 3 
©(Jt^Jf\^)ns, 263-265 
sen' f Sty 1 e . ess style sheet, 218 
server, defined, 376 
server-side scripting, 222 
SGML (Standard Generalized Markup 

Language), 18, 376 
shape attribute of <area /> element, 121 
shopping cart 
do-it-yourself software, 324 
hosting e-commerce services, 324 
PayPal, 323, 324-327 
steps for using, 322-323 
streamlining buying process, 320 
shorthand properties (CSS), 144, 365-366 
simple links, 98. See also links 
Simple Mail Transfer Protocol (SMTP), 16 
SimpleText text editor, 30 
singleton tags, 20-21, 110 
site links, 98. See also links 
site maps. See mapping your site 
"Site Redesign Tutorial" (Webmonkey), 54 
site reviews, scheduling, 357 
si ze attribute 
deprecation of, 363 
<hr /> element, 80 
<input /> element, 255 
<sel ect> element, 271 
size property (CSS), 160 
sizing images, 114-116 
sketching tables, 183-185 
slash 00 
empty elements ended by, 20 
for JavaScript comments, 231 
in site links (../), 98 
Smith, Bud (Web Usability For Dummies'), 54 
Smith, Dori (HTML 4 For Dummies), 1-6 
SMTP (Simple Mail Transfer Protocol), 16 
software. See also HTML toolbox; image- 
editing tools; specific programs 
FTP clients, 55, 341-342 
needed for Web page creation, 29-30 
PDF file reader, 105 
for processing form data, 267 
shopping cart packages, 324 



syntax checkers, 346 

for Web servers, 52 

for Zip files, 105 
spaces. See also white space 

in filenames, avoiding, 35 

letter spacing, 171 

word spacing, 171 
spacing between table cells 

eel 1 spaci ng attribute for, 196-198 

CSS styles for, 198-199 

defined, 196 
span attribute, 212 
<span> element, 284 
spanning table cells. See cell spanning 
spea k property (CSS), 367 
speak-header property (CSS), 368 
speak-numeral property (CSS), 368 
speak-punctuati on property (CSS), 368 
specification, 376. See also standards 
speech sound (aural) styles (CSS), 158 
speech rate property (CSS), 368 
speed. See performance 
spell checking Web pages, 352-353 
square brackets ([ ]) as array operator, 243 
sre attribute 

<img /> element, 21-22, 111 

< i n p u t / > element, 265 

<script> element, 227, 228 
Standard Generalized Markup Language 

(SGML), 18, 376 
standards 

CSS Candidate Recommendations, 128 

HTML and XHTML specifications, 16-17 

for tables, following, 207 

Unicode, 24 
standby attribute of <object> 

element, 291 
start attribute of <ol > element, 

84-85, 86, 363 
Starting an Online Business For Dummies 

(Wiley Publishing), 323 
statements (JavaScript) 

conditional statements, 236-238 

defined, 230, 376 

expression statements, 236 
status window parameter 
(JavaScript), 287 
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stress property (CSS), 368 
stri ke element (deprecated), 362 
slnfeteousbJC^SrfJvles for, 176-177 
|riii^ffilffije\.^Scriptl 233 

structure of documents 
basic elements, 59-60 
body, 67 

DOCTYPE declarations, 60-61 

<head> element, 62 

header, 62-66 

<html > element, 61 

identifying your document, 60-62 

importance of, 344 

other attributes, 68 

XHTML namespace, 61-62 
style attribute (CSS) 

for inline styles, 139 

using carefully, 140 
<styl e> element (CSS) 

defining navbar class in, 143-144 

©import keyword, 139, 150 

for internal style sheets, 137 

for text rollovers, 280 

using, 137-138 
style sheet, 377. See also CSS (Cascading 

Style Sheets) 
stylesheet, ess file, 311, 316-317 
sty 1 eSwi tcher . j s script, 218-219 
Submit buttons for forms, 263-265 
suffixes for filenames 

broken links and, 99 

. htm versus . html , 35-36 
summary attribute, 212 
Swiss army knives, 342 
Symantec, site map used by, 46 
syntax, 377 

syntax checkers, 340-341, 346, 377 

• r» 

tabi ndex attribute, 271 
<ta bl e> element 

align attribute, 199-200 

border attribute, 189-191 

required for tables, 186 

for simple table, 186 

for table-based Web page, 187, 189 

width attribute, 193-195 



table l ayout property (CSS), 160 
tables 

aligning, 199-202 

attributes, 211-212 

basics, 182-183 

borders, 182, 189-193 

browser display of, 193 

cell span versus cell width, 182 

cell spanning, 182, 185, 202-205 

colors for, 210-211 

creating a simple table, 186-187 

creating a table-based Web page, 187, 189 

CSS styles for borders, 191-193 

CSS styles for width, 195-196 

dense, avoiding, 210 

elements, 185-186, 188 

height and width adjustment, 193-196 

horizontal alignment, 199-200, 201-202 

for layout, 179-180, 182, 183-185 

nesting, 208-210 

padding and spacing, 196-199 

populating cells, 205-206 

presentation-focused sizing for, 180 

sanitizing markup for, 208 

sketching, 183-185 

standards, following, 207 

steps for developing layout ideas, 
183-184 

testing, 206-207 

tips, 207-211 

traditional uses, 179, 180 

turning borders on and off, 189-190 

vertical alignment, 200-201 

(X)HTML with CSS in, 181 
tags. See also elements; form input tags; 
specific tags and elements 

for comments, 25 

defined, 377 

displaying tag characters literally, 24-25 

form input tags, 254-265 

HTML versus XHTML and case of, 2 

keeping track of, 346-347 

nested elements and, 21 

singleton tags, 20-21, 110 

start and end tag pairs, 19-20 
target attribute of anchor element, 

100-101 
<tbody> element, 188 
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<td> element 
bgcol or attribute, 211 
^TjMddijil attejpute, 196-198 
Dl^^|\t©>ute, 196-198 
col span attribute, 202-204 
enclosed within <tr> element, 186 
populating table cells, 205-206 
required for tables, 186 
rowspan attribute, 202, 204-205 
for simple table, 186 
<tab1 e> element nested in, 208-210 
for table-based Web page, 187, 189 
val i gn attribute, 200-201 
width attribute, 193-195 
templates 
company site contact page, 315-316 
company site home page, 31 1-313 
company site products page, 313-314 
defined, 377 

eBay auction page, 306-308 

product catalog category page, 327-329 

product catalog detail page, 329-330 

using templates in this book, 300 
testing and checking Web pages 

beta testing, 355-356 

for broken links, 353-354 

getting user feedback, 43, 357-358 

HTML validators for, 340-341, 
346, 356-357 

keeping content fresh, 354-355 

link checkers for, 339-340, 354 

on many browsers, 13, 346 

peer reviews, 356 

scheduling site reviews, 357 

site map for, 351, 352 

spell checking, 352-353 

tables, 206-207 
text. See also font styles (CSS); formatting 
text; text blocks 

aligning images and, 117-118 

alternative, for images, 112-113 

color property for (CSS), 164-165 

for eBay auction page, 302, 304, 306-308 

for forms, 269 

greeked, 314 

for links, 50-51, 95 

moving outside linear thinking, 348-349 
for navigation, images versus, 184 
organizing, 26-27 



populating table cells, 205-206 

for product catalog, 320 

rollovers with CSS, 279-280 

saving Word files as text documents, 32 

text-only browsers, 14 
text attribute 

deprecation of, 363 

described, 33 
text blocks. See also text; specific kinds 

aligning with CSS, 171-173 

block quotes, 74-75, 76 

defined, 69 

headings, 27, 33, 72-74 
horizontal rules, 27, 79-82 
HTML page as collection of, 69 
indenting with CSS, 173 
inline elements versus, 70 
kinds of, 69 

line breaks, 27, 76, 78-79 

paragraphs, 70-72 

Preformatted text, 75-76, 77 
text boxes for forms, 262-263 
text document, 377 
text editors 

choices for, 30 

editing Web pages with, 10 

limitations of, 333 

reasons for using, 30 
text fields for forms, 255-256 
text rollovers 

adding to Web pages, 280 

CSS and HTML code for, 279-280 

illustrated, 278-279 

image rollovers versus, 278 
t e x t - a 1 i g n property (CSS) 

overview, 153 

for tables, 201-202 

for text blocks, 172-173 
<textarea> element, 263 
text-decorati on property (CSS), 

149, 153, 176-177 
text- indent property (CSS), 173 
text-only browsers 

alternative text for images, 112-1 13 

anchor elements and, 96 

heading display by, 74 

reasons for using, 14 
text-transform property (CSS), 175-176 
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<tf oot> element, 188 
<th> element, 188 

Books 

title attribute, 94 
<ti tl e> element 

adding to document, 62-63 

for "Hello World" example, 33 
title of Web page 

defined, 377 

eBay auction page, 302, 304 

overview, 62-63 
Tittel, Ed {HTML 4 For Dummies), 1-6 
toolbar window parameter 

(JavaScript), 287 
top property (CSS), 153 
<tr> element 

enclosed within <tabl e> element, 186 

required for tables, 186 

for simple table, 186 

for table-based Web page, 187, 189 

<td> element enclosed within, 186 

val i gn attribute, 200-201 
tracking (letter spacing), 171 
transferring files. See FTP (File Transfer 
Protocol); posting your Web pages 
transparency, 377 
tt element, 93 
tty media type (CSS), 151 
tv media type (CSS), 151 
type attribute. See also type attribute of 
<i nput /> element 

deprecation of, 363 

for forms, 271-272 

for links, 106 

<object> element, 291 

<ol > element, 85-86 

<ul > element, 87-88 
type attribute of <i nput /> element 

checkbox value, 257 

file value, 259 

hidden value, 259 

i mage value, 265 

overview, 272 

password value, 256 

radio value, 257 

reset value, 263-264 



submi t value, 263-264 
text value, 255 

u element (deprecated), 362 
UI (user interface). See also designing a 
Web site; navigation tools 

defined, 377 

design resources, 54 

goals and design of, 42-44 

good versus poor, 41 

site map as visual guide, 46 

visual scheme design, 48-49 
<ul > element 

in bulleted lists, 87 

closing tag, 86 

defined, 21, 86 

type attribute, 87-88 
"under construction" sections, avoiding, 46 
underlining, CSS styles for, 176-177 
Unicode character codes 

online information for, 24 

using, 24 

Uniform Resource Locators. See URLs 
unordered lists. See bulleted lists 
uppercase. See case 
URLs (Uniform Resource Locators). See 
also Internet resources 

as action attribute value (<form> 
element), 253, 254 

common mistakes, 99 

defined, 2, 15, 377 

for FTP, 55 

http: / / in links, 99 

for links, 95, 96 

overview, 15 
u semap attribute 

<img /> element, 121 

table summarizing, 122 
user feedback, getting, 43, 357-358 
user input. See also forms 

confirming actions with JavaScript, 
237-238 

validating with JavaScript, 
221-223, 265-266 
user interface. See UI 
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HTML, 340-341, 346 
links, 339-340 

user input, 221-223, 265-266 
validation, defined, 378 
val i gn attribute of <td> and <tr> 

elements, 200-201 
val lie attribute 

<button> element, 272 

deprecation of, 363 

< i n p u t / > element, 258, 263-264, 
265, 272 

<opti on> element, 260 
values of declarations (CSS), 130 
v a r element, 93 
variables (JavaScript) 

data types, 232-233 

declaring, 232 

defined, 231, 378 

using, 231-232 
vertical alignment of tables, 200-201 
verti cal -al ign property (CSS), 201 
View Cart button (PayPal shopping 

cart), 327 
viewing 

"Hello World" example, 36-37 

local pages, 14, 36-37, 38 

previewing pages on browsers, 13, 29 
v i s i b i 1 i ty property (CSS), 154 
: vi si bl e pseudo class (CSS), 166 
: vi si ted pseudo class (CSS), 165, 166 
visual media styles (CSS), 152-156 
v 1 i n k attribute (deprecated), 364 
voice-family property (CSS), 368 
vol ume property (CSS), 368 
v s p a c e attribute 

deprecation of, 364 
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